浅谈JavaScript的防抖与节流

前言

在前端开发的过程当中，咱们常常会须要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候咱们并不但愿在事件持续触发的过程当中那么频繁地去执行函数。这时候就用到防抖与节流。

函数防抖（debounce）：

当持续触发事件时，必定时间段内没有再触发事件，事件处理函数才会执行一次，若是设定的时间到来以前，又一次触发了事件，就从新开始延时。以下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

非当即执行版

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);      
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}
复制代码

非当即执行版的意思是触发事件后函数不会当即执行，而是在 n 秒后执行，若是在 n 秒内又触发了事件，则会从新计算函数执行时间。

当即执行版

function debounce(func,wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}
复制代码

当即执行版的意思是触发事件后函数会当即执行，而后 n 秒内不触发事件才能继续执行函数的效果

防抖应用场景

1. 搜索框输入查询，若是用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户中止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
2. 表单验证
3. 按钮提交事件。
4. 浏览器窗口缩放，resize事件(如窗口中止改变大小以后从新计算布局)等。

函数节流（throttle）：

当持续触发事件时，保证必定时间段内只调用一次事件处理函数。节流通俗解释就好比咱们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，咱们要把水龙头关小点，最好是如咱们心意按照必定规律在某个时间间隔内一滴一滴的往下滴。以下图，持续触发scroll事件时，并不当即执行handle函数，每隔1000毫秒才会执行一次handle函数。函数节流主要有两种实现方法：时间戳和定时器

时间戳版:

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}
复制代码

定时器版:

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}
复制代码

节流应用场景

1. 按钮点击事件
2. 拖拽事件
3. onScoll
4. 计算鼠标移动的距离(mousemove)

总结

• 函数防抖：将几回操做合并为一此操做进行。原理是维护一个计时器，规定在delay时间后触发函数，可是在delay时间内再次触发的话，就会取消以前的计时器而从新设置。这样一来，只有最后一次操做能被触发。

• 函数节流：使得必定时间内只触发一次函数。原理是经过判断是否到达必定时间来触发函数。

区别：

函数节流无论事件触发有多频繁，都会保证在规定时间内必定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 好比在页面的无限加载场景下，咱们须要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操做时才去请求数据。这样的场景，就适合用节流技术来实现。

相关文章

搭建一个vue-cli的移动端H5开发模板

从零开始构建一个webpack项目

总结几个webpack打包优化的方法

一文读尽前端路由、后端路由、单页面应用、多页面应用