节流事件

有一些事件是会频繁触发的，比如scroll resize mousemove keyup 如果在这些事件上绑定函数，并且这些函数要进行耗性能的计算，那么会导致页面忽急忽缓，反应迟钝 这时就需要使用节流事件来控制函数被触发的频率。

function handler() {
    // 处理一些耗性能的计算
    // 或者发送ajax请求

    console.log('2333');
}

$(window).scroll(handler); // 反复触发handler，影响性能

方法一 setTimeout

var timer = 0;

$(window).scroll(function() {
    if (!timer) {
        timer = setTimeout(function() {
            handler();
            timer = 0;
        }, 1000);
    }
});

方法二 setInterval

// scroll虽然绑定了一个会频繁触发的函数，但是该函数只是改变scrolled的值，不会影响性能

var scrolled = false;

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

setInterval(function() {
    if (scrolled) {
        handler();
        scrolled = false;
    }
}, 1000);

想象一个场景：实时搜索

在输入框输入关键词后就要马上显示结果，通常做法是在keyup上绑定handler处理函数，发送ajax请求。但是如果用户输入速度很快，那么keyup会触发多次，发送多个ajax请求，而我们只是想要在用户停止输入的时间超过1s后才发送ajax

这和前面的scroll事件又有些不同，在这里我只想handler函数在keyup触发后执行一次 前面两种方法只是减少了handler()触发的频率，但是仍然会触发多次

方法三 clearTimeout

var searchTimeout = null;
$('#input').on('keyup', function(event) {
	//每次keyup时直接取消上次计时器，只有当keyup超过1s时才执行handler
	clearTimeout(searchTimeout);
	searchTimeout = setTimeout(function() {
	    handler();
	}, 1000);
});