谈谈js中的节流和防抖函数

关于节流和防抖，这篇文章说的很好了，深入lodash源码分析防抖和节流
深入篇 | Lodash 防抖和节流是怎么实现的
但是不利于我们理解不使用lodash的节流和防抖，这里我总结了一下我所理解的节流和防抖函数以及用法。

函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

防抖：优化页面请求性能（公交司机会等人都上车后才出站）

在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。

debounce lodash链接

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

var oInp = document.getElementById('input');
function ajax (){
    console.log(this.value);
}
function debounce (handler, wait) {
    var timer = null;
    return function() {
        var _self = this, _arg = arguments;
        clearTimeout(timer);
        // 第一时刻不执行，但是最后一次事件触发执行
        timer = setTimeout(()=>{
            handler.apply(_self, _arg);
        },wait)
    }
}
oInp.oninput = debounce(ajax, 1000)

节流：优化网络请求性能（水滴攒到一定重量才落下）

预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。

throttle lodash链接

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)

• 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

var oDiv = document.getElementById('show');
var oBtn = document.getElementById('btn');
function add (e) {
    console.log(this,e)
    oDiv.innerText = parseInt(oDiv.innerText) +1;
}
function throttle (handler, wait) {
    var lastTime = 0;
    return function () {
        // this 指向
        var nowTime = new Date().getTime();
        // 第一时刻就执行，但是最后一次事件触发不一定执行
        if (nowTime - lastTime > wait) {
            handler.apply(this,arguments)
            lastTime = nowTime;
        }
    }
}
oBtn.onclick = throttle(add, 1000)

结合两者优点，可以优化如下

throttle (handler, wait = 300) {
       let lastTime = 0, timer = null
            return function (...args) {
                const nowTime = +new Date();
                if (nowTime - lastTime < wait) {
                    if (timer) clearTimeout(timer);
                    timer = setTimeout(()=>{
                        lastTime = nowTime;
                        handler.apply(this, args);
                    },wait)
                } else {
                    lastTime = nowTime;
                    handler.apply(this, args)
                }
            }
        }

欢迎讨论