处理事件节流方法

一、setTimeout()

通过给setTimeout()设置一个合理的值，就能够在即时返馈与较高性能之间达成一个合理的折中。

$(document).ready(function() {
    var timer = 0;

    $(window).scroll(function() {
        if (!timer) {
            timer = setTimeout(function() {
                checkScrollPosition();
                timer = 0;
            }, 250);
        }
    }).trigger('scroll');
});

我 们 没 有 直 接 将 checkScrollPosition() 设 置 为 scroll 事 件 处 理 程 序 ， 而 是 使 用JavaScript的setTimeout函数，延迟250毫秒再调用它。更重要的是，我们会在执行任何代码之前先检查当前运行的计时器。因为检查一个简单变量的值速度极快，所以对事件处理程序的大多数调用都几乎能够立即返回。而对checkScrollPosition()函数的调用只会在计时器结束时才会发生，通常每次都要等250毫秒。

二、计时器

根据被节流的操作的特点，以及与页面的典型交互方式，我们可以直接给页面创建一个计时器，而不是等事件开始时再创建。

$(document).ready(function() {
    var scrolled = false;

    $(window).scroll(function() {
        scrolled = true;
    });

    setInterval(function() {
        if (scrolled) {
            checkScrollPosition();
            scrolled = false;
        }
    }, 250);

    checkScrollPosition();
});

与前面的节流代码不同，这个轮询式的方案会调用JavaScript的setInterval()函数，每250毫秒检查一次scrolled变量的状态。不管什么时候发生滚动事件， scrolled都会被设置为true，以确保在下一次轮询时调用checkScrollPosition()。

三、消除抖动

在频繁重复的事件发生期间限制处理次数的第三种技术叫消 除 抖动（debouncing）。这种技术是以电子开关重复发送信号必需的后处理技术命名的，可以确保在发生多个事件的情况下，最终只会有一个事件实际地起作用。

var searchTimeout,
    searchDelay = 300;
$('#title').on('keyup', function(event) {
    clearTimeout(searchTimeout);

    searchTimeout = setTimeout(function() {
        $ajaxForm.triggerHandler('submit');// 发送Ajax请求
    }, searchDelay);
}

前面的代码，我们需要scroll处理程序随着滚动的继续多次发挥作用。而在这里，我们希望keyup行为在输入完成后只发生一次。为此，我们在用户按下第一个键的时候设置一个JavaScript计时器，然后跟踪该计时器。随后的每一次击键动作都会重置该计时器，只有用户停止击键的时间超过预定的300毫秒后，才会触发submit处理程序并发送Ajax请求。

注：以上代码节选自《jQuery基础教程第4版》一书。