UJS：指示「變」事件時，輸入字段更改

Question

我使用自帶的Rails稱爲Rails的UJS庫​​只有一次閃光：https://github.com/rails/jquery-ujs

它有一個自定義事件稱爲「change.rails」時，將觸發輸入字段會發生變化，您可以遠離該字段。我正在使用引導顏色選擇器庫：https://itsjavi.com/bootstrap-colorpicker/

當您更改選擇選擇器的值時，它會更新輸入字段，並且當您滾動顏色選擇器時，會觸發數百萬個更改事件並引發數百萬個Ajax請求發送到服務器。

我不知道如何來規避這個問題。我想一個計時器添加到只有3秒後發送一個Ajax請求，但改變顏色時，它仍然發送數以百萬計的Ajax請求的：

color_picker: function(){ 
     $color_picker.on('change.rails', $form_holder, function(event, xhr, settings) { 
      setTimeout(function(){ 
       $color_picker.trigger('change.rails'); 
      }, 3000) 
      event.preventDefault(); 
     }) 
    } 

我怎樣才能解決這個問題呢？

Answer 1

您可以將其設置爲可變存儲到您的超時參考：

var timeout = setTimeout(function(){}, 3000); 

然後你就可以通過調用取消超時：

clearTimeout(timeout) 

如果清除超時每當'change.rails'事件發生，您的延期ajax方法將不會觸發，直到超時有機會完成：

color_picker: function(){ 

    var timeout; 

    $color_picker.on('change.rails', $form_holder, function(event, xhr, settings) { 

     clearTimeout(timeout); 

     timeout = setTimeout(function(){ 
      $color_picker.trigger('change.rails'); 
     }, 3000) 
     event.preventDefault(); 
    }) 
}