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

Question

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

我可以使用 onMouseOut 来解决这个特定问题，但我遇到了其他问题，例如当用户 click/drags 调整大小时检测浏览器 window 调整大小并且事件是每次像素变化时触发。所以我正在寻找一个只会触发最终值的答案，适用于所有类似的场景。

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

Answer 1

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

每次调用去抖函数时，它 "pushes back" 它的执行时间为 n 毫秒。这意味着虽然在 t 毫秒内多次触发（例如：当鼠标移动时），它只会执行在 not[=25 之后执行处理程序=] 被触发 t 毫秒（例如：当鼠标停止移动时）。

编辑：

好的，jquery link 有点过时了。可以在 Underscore.js 来源中找到如何去抖动的更好示例 here.

Answer 2

这个怎么样：

设置一个timeout向服务器发送请求，在第一个onChange触发后，将第一个标志更改为false。
每触发一次onChange，重置超时计数。
发送请求后，重置第一个标志。

编辑：这是示例代码：

$(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" />

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

jQuery javascript prevent continuous input change event triggers

javascript

ajax

jquery

onchange