防抖与节流 - 码农教程

防抖

防抖：多次触发某个函数，以最后一次函数的执行为准。

也就是说给定了一个时间n，如果在n毫秒内重复执行某个函数那么将不会执行，如果n毫秒内不再触发这个函数，那么将执行该函数。表现的效果是如果一直触发函数，那么只有最后一次才会执行。

简单实现:

function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

简单使用:

var fn = debounce(function (){
    console.log("函数执行了");
},500);
fn();// 第一次 并不会执行
fn();// 第二次 并不会执行
fn();// 第三次 由于500毫秒后没有再次执行 所以会在500毫秒后打印"函数执行了"

防抖适用场景：多次重复的操作以最后一个为准的。就比如列表页有一个查询按钮，往往我们多次查询的结果都是以最后一次的结果为准，这里就可以用防抖。

节流

节流：多次触发某个函数，一段时间内只执行一次。

也就是说给定了一个时间n，如果在n毫秒内该函数多次调用那么会忽略这些调用，等n毫秒后会执行该函数。表现的效果是如果一直触发函数，那么每隔n毫秒就会执行一次函数。

简单实现:

function throttle(func, wait) {
    var timeout = null;

    return function() {
        var context = this;
        var args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

节流适用场景：将密集型操作，转换为相对松散型的操作,以减小计算量。就比如onmousemove和onresize事件的处理等。

lodash库已经对防抖和节流做了实现，我们可以直接使用。