前言

有时候一些操作可能在短时间内执行多次，但是效果却不是很明显。比如监听键盘Input的时候，敲中文的时候，中文还没打出来已经发起请求n多次；滚动鼠标的时候也会触发好多次，十分影响性能。所以需要加入“防抖”或者“节流”来优化。

参考：https://blog.csdn.net/crystal6918/article/details/62236730
侵删。

正文

一、防抖（debounce）

若干个函数调用合成一次，并在给定时间过去之后仅被调用一次。 简单讲，就像搭公交。10S没人上车就会关门，这时候每5S来一个人，车门关门就会延时到10s后，一直来人就会一直开着。到最后没人了才会关门，且只会关一次。

/**
 * 防抖：若干个函数调用合成 一次，并在给定时间过去之后仅被调用一次。简单讲，就像搭公交。10S没人上车就会关门，这时候每5S来一个人，车门关门就会延时到10s后，一直来人就会一直开着。到最后没人了才会关门，且只会关一次
 *  例子：$("input").on("input",debounce（getAddressList，1000）)
 * @param fn 需要防抖的方法
 * @param delay 延迟时间
 * @returns {Function} 返回具有防抖功能的方法
 */
var debounce = function (fn, delay) {
    // 维护一个 timer
    let timer = null;

    return function() {
        // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
        let context = this;
        let args = arguments;

        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    }
}
function getAddressAjax(){
    
}
$("input").on("input",debounce(getAddressAjax，1000）);//每次输入都会触发这个方法，但是当且仅当停下输入一秒后才会真正执行getAddressList发起请求

二、节流（throttle）

节流函数允许一个函数在规定的时间内只执行一次，就像关不紧的水龙头，每隔几秒滴一次。还是公交的例子：每隔一段时间调用一次。正如公交车，每15分钟发一班车，不管有没有人坐车，雷打不动。

时间戳实现

// 时间戳实现方式，调用结束之后如果在延时时间之内则不会触发
var throttle = function(fn,delay){
    var prevDate = new Date();
    
     return function() {
        // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
        let context = this;
        let args = arguments;

        if(new Date() - prevDate >= delay){
             fn.apply(context, args);
             prevDate = new Date();
        }
    }
}

定时器实现

// 定时器实现：刚开始不会执行，调用结束之后会再触发一次
var throttle = function(fn,delay){
   var timer = null;

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

总结

以上两个例子只为了抛砖引玉，这些并不能完全满足需求，所以带着这个思想开发，有时候灵光一现，水到渠成。

前端性能优化：节流与防抖

前言

正文

一、防抖（debounce）

二、节流（throttle）

总结

猜你喜欢