Javascript 延迟事件答案

【问题标题】：Javascript delay eventJavascript 延迟事件
【发布时间】：2012-07-23 10:42:18
【问题描述】：

我有一个函数handleScroll，当窗口的滚动位置发生变化时需要调用它。这是代码

$(window).scroll(handleScroll);

但问题是上面的代码最终调用handleScroll 过于频繁。如何修改上面的代码，让 handleScroll 只在用户停止滚动 200 毫秒后才被调用？

【问题讨论】：

这叫"debouncing"。

标签： javascript debouncing

【解决方案1】：

使用underscorejs库，可以很简单

var debounceid = _.debounce(handleScroll, 200);
$(window).resize(debounceid);

【讨论】：

【解决方案2】：

var timeoutHandle;

$(window).scroll(function(e) {
    if (timeoutHandle) {
        clearTimeout(timeoutHandle);
    }
    timeoutHandle = setTimeout(function() {
        handleScroll(e);
        timeoutHandle = null;
    }, 200);
});

【讨论】：