Jquery延迟改变

Question

可能是重复问题：
在 jQuery 中限制事件调用频率

我喜欢 jQuery 的 .change() 功能，但我想要在用户快速更改下拉选择框选项时防止触发大量的 AJAX 请求。例如，当用户使用鼠标滚轮时，它会触发每个选项，因为他们选择自己的新选项。

我想要找到一种好的干净方法，只有在用户停止更新下拉选择框一秒钟后才发送这些更新。

是否有一种巧妙的方式来处理这种情况？

- GoldenNewby

---

你所寻找的称为去抖动。 - Felix Kling

Answer 1

通常做法是使用setTimeout和clearTimeout：

var wto;

$('#select').change(function() {
  clearTimeout(wto);
  wto = setTimeout(function() {
    // do stuff when user has been idle for 1 second
  }, 1000);
});

- glortho

---

WTO代表什么意思？ - Gisheri

Window.TimeOut - 这只是一个随机选择的例子。 - glortho

如果您不想创建全局变量，可以使用.data()将间隔ID分配给选择元素本身。需要编写更多的代码，但我知道有些人不喜欢创建全局变量。 - Gavin

这是@Gavin评论的一个示例：https://stackoverflow.com/a/29417088/2617123 - epineda

我认为使用HTML元素来存储应用程序状态比使用全局状态更容易出现问题，但您可以通过将模块化的代码与https://webpack.js.org之类的工具捆绑在一起或仅通过将代码包装在自执行函数中轻松避免全局状态：http://markdalgleish.com/2011/03/self-executing-anonymous-functions - glortho

Answer 2

我建议您使用underscore.js，因为：

var newFunction=_.debounce(function (){ 
  alert('You function, after use stop scroll')
},1000); //Wait seconds after he stops

$('#select').change(newFunction);

了解更多关于underscore.debounce的内容。

- Aminadav Glickshtein