js 防抖与节流

防抖: 触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

举个栗子

   <button id="btn">防抖</button>
    var btn = document.getElementById('btn');
    var timer = null;
    btn.onclick = function () {
        clearTimeout(timer)
        timer = setTimeout(function () {
            test.call(this)
        }, 500)
    }
    function test() {
        console.log("我是需要执行的函数")
    }

看上述例子 连续点击防抖按钮,在500毫秒内,函数都会重新计算,只会记录一次有效点击;
使用场景
1.搜索框搜索输入。只需用户最后一次输入完，再发送请求；
2.用户名、手机号、邮箱输入验证；
3.浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。

节流: 限制一个函数在一定时间内只能执行一次。
我们把上面栗子修改一下

   <button id="btn">节流</button>
    var btn = document.getElementById('btn');
    var timer = null;
    btn.onclick = function () {
        if(timer) return;
        timer = setTimeout(function () {
            test.call(this)
            timer = null;
        }, 500)
    }
    function test() {
        console.log("我是需要执行的函数")
    }

简单修改一下, 就可以看出在,500毫秒内函数只能执行一次, 这样我们就可以用在 短时间内防止按钮的重复点击.

使用场景:
1.懒加载、滚动加载、加载更多或监听滚动条位置；
2.百度搜索框，搜索联想功能；
3.防止高频点击提交，防止表单重复提交；

总结:其实防抖和节流看着有些相像,但仔细理解之后还是有所不同, 前者是在规定时间内,只会执行一次有效函数,而且过多的触发,会延长函数执行时间;后者则是在规定时间内只能执行一次,即使再触发也是无效的.