Jquery延迟更改[重复]答案

【问题标题】：Jquery change with delay [duplicate]Jquery延迟更改[重复]
【发布时间】：2012-02-24 03:02:35
【问题描述】：

可能重复：
Throttle event calls in jQuery

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

我想想出一个干净的方式来处理仅在用户停止更新选择下拉菜单后才发送这些更新。

有没有一种巧妙的方法来处理这种情况？

【问题讨论】：

你要找的东西叫做debouncing。

标签： javascript jquery

【解决方案1】：

执行此操作的典型方法是使用 setTimeout 和 clearTimeout：

var wto;

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

【讨论】：

wto 代表什么？
Window.TimeOut - 例如随机选择。
如果不想创建全局变量，可以使用.data()将区间id赋给select元素本身。需要更多代码，但我知道有些人不喜欢创建全局变量。
这里是@Gavin 评论的示例：stackoverflow.com/a/29417088/2617123
我认为使用 HTML 元素来存储应用程序状态比使用全局状态有更多的陷阱，但是您可以通过将模块化代码与 webpack.js.org 或只需将代码包装在自执行函数中即可：markdalgleish.com/2011/03/self-executing-anonymous-functions

【解决方案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的信息。

【讨论】：