jQuery javascript 防止连续输入变化事件触发

Question

我以前遇到过这个问题。这次是 HTML5 颜色输入给出了问题。这就是问题所在。我想使用 onChange 事件通过 Ajax 将用户选择的值从颜色输入发送到服务器 - 几乎实时更新数据库。然而，当用户将鼠标拖到色样上时，它会快速触发大量onChange 事件，对于每个值更改，因此服务器将被数百个毫无意义的请求所淹没，直到用户停止滑动鼠标！

我可以使用onMouseOut 来解决这个特定问题，但我遇到了其他问题，例如当用户单击/拖动以调整大小时检测浏览器窗口调整大小并且每个像素更改都会触发事件。因此，对于所有类似的情况，我正在寻找一个仅在最终值上触发的答案。

处理此问题的最佳方法是什么，并且仅在数据完成更改时触发。 IE。忽略所有更改，直到用户确定最终值。 onAfterChange 方法事件会很好，但我找不到！

Answer 1

您可以通过 debouncing 您的事件处理函数来防止这种情况发生。

每次调用去抖动函数时，它都会将其执行“推回”nms。这意味着虽然在t 毫秒内多次触发（例如：当鼠标移动时），它只会执行处理程序不被触发t ms（例如：当鼠标停止移动时）。

编辑：

好的，jquery 链接有点过时了。可以在 Underscore.js 源代码here 中找到更好的去抖动示例。

Answer 2

这个怎么样：

1. 在第一个onChange触发后，设置一个timeout向服务器发送请求，并将第一个标志更改为false。

2. 每触发一次onChange，重置超时计数。

3. 发送请求后，重置第一个标志。

编辑： 这是示例代码：

$(document).ready(function(){
   var myInterval = undefined;
   var mytimeoutcount = NaN;
   var i =0; // for debug
   
   $("#myinput").keyup(function(){
      console.log("event trigger"); // for debug
      mytimeoutcount = 300;
      if(myInterval == undefined){
          myInterval = setInterval(function(){
              mytimeoutcount -= 10;
              if(mytimeoutcount <= 0){
                // do request, for debug
                i+=1; 
                console.log(i); 
                window.clearInterval(myInterval);
                myInterval = undefined;
              }
          }, 10);
      }
      
   });
});

#myinput{
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="myinput" type="text" value="test" />