全网最详细JavaScript防抖、节流函数解析

csdoge

已于 2022-09-30 20:37:55 修改

阅读量1.3k

点赞数 2

文章标签： javascript 前端开发语言

于 2022-09-24 12:37:17 首次发布

本文链接：https://blog.csdn.net/Ted_az/article/details/127018974

版权

防抖与节流

防抖与节流

防抖与节流

防抖

作用与简介

在一个周期T内，如果重复的进行某种响应操作，在不设置防抖函数的时候，每操作一次都会调用一遍响应函数。设置了防抖函数，如果这一次操作与上一次操作的间隔小于T，则不会调用响应函数，并让计时器重新从0开始计时，直到某次操作与上次操作间隔大于等于T,才执行。
防抖函数分为立即执行的防抖函数和延迟执行的防抖函数。
立即执行的防抖函数就是当满足时间间隔大于T这一条件时进行操作就立即调用响应函数进行响应。
延迟执行的防抖函数则是从0开始计时，直到某次响应之后计时器能达到T，才会响应。

实现

/*
 * @param  {function}   func      回调函数
 * @param  {number}     wait      表示时间间隔
 * @param  {boolean}    immediate  如果为true则为立即执行，为false则为延迟执行                             
 * @return {function}             返回客户调用函数
 */
function debounce(func,wait,immediate) {
    let timeout,result; // timeout 为计时器，result为回调函数的返回值
    let debounced = function() {
        if(timeout)clearTimeout(timeout); // 如果计时器存在，要将其清除，以便重新建立新的计时器（防抖的核心）
        let context = this; // 暂存debounced的this指向，其指向响应函数，方便后续改变func的this指向
        let args = arguments; // 暂存响应函数的event参数，以便后续将其赋给fun
        if(immediate) {
            let flag = !timeout; // 判断此时是否还在上一个计时中
            timeout = setTimeout(function(){
                timeout = null;
            },wait);   // 设定计时器，在wait时间之后，把计时器赋为空，以便那时能立即执行
            if(flag) result = func.apply(context,args); // 若满足条件，则立即执行
        }else {
            // 不是立即执行模式则设置延迟执行函数
            timeout = setTimeout(function() {
                func.apply(context,args);
            },wait);  
        }
        return result;
    }
    // 取消计时器的操作
    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    }
    return debounced;
}

核心与细节

实现的核心是计时器函数，通过在函数开头清除计时器的操作，来重新计时。
最难以理解的应该是

          if(immediate) {
          let flag = !timeout; // 判断此时是否还在上一个计时中
          timeout = setTimeout(function(){
              timeout = null;
          },wait);   // 设定计时器，在wait时间之后，把计时器赋为空，以便那时能立即执行
          if(flag) result = func.apply(context,args); // 若满足条件，则立即执行
      }

在该代码块中，timeout被赋值，在wait时间之内都不为null，所以在这wait时间内进行响应操纵，flag都为false,即不立即执行，并且计时器重新开始计时。只有当在wait时间内不进行响应操作，timeout在wait时间之后被置为null，再次响应的时候才能立即执行。

应用场景

1.scroll事件滚动触发
2.搜索框输入查询
3.表单验证
4.按钮提交事件
5.浏览器窗口缩放,resize事件

节流

作用与简介

节流与防抖有相似之处，本质上来说两者都是为了防止前端频繁进行响应操作而设置的，二者的差别在于防抖会在某次操作重新进行计时，而节流则不会，节流是从第一次操作开始计时，周期性的判断是否有响应，如果有则执行。

实现

/*
 * @param  {function}   func      回调函数
 * @param  {number}     wait      表示时间窗口的间隔
 * @param  {object}     options   如果想忽略开始函数的的调用，传入{leading: false}。
 *                                如果想忽略结尾函数的调用，传入{trailing: false}
 *                                两者不能共存，否则函数不能执行
 * @return {function}             返回客户调用函数
 */
function throttle(func, wait, options) {
    let context, args, timeout;
    let old = 0; // 时间戳
    if (!options) options = {}; // 如果没有该参数，则置为0，防止意外发生
    return function () {
        context = this;
        args = arguments;
        let now = new Date().valueOf();
        if (options.leading === false && old == 0) old = now; // 不要立即执行，则第一次不会进入if(now-old>wait)
        if (now - old > wait) {   // 当时间间隔达到一个周期则执行此代码块
            // 第一次会直接执行
            if (timeout) {            // 将计时器清除，防止执行两次响应函数
                clearTimeout(timeout);
                timeout = null;
            }
            func.apply(context, args);
            old = now;
        } else if (!timeout && options.trailing !== false) { // 当时间间隔未达到一个周期时则执行此代码块
            // 最后一次被执行
            timeout = setTimeout(function() {  // 在一般情况下是不会执行这个延迟函数的，只有在最后一次执行此延迟函数
                old = new Date().valueOf();    // 在最后一次执行时候将old置为当前时间，防止下一次操作响应的时间间隔不足wait
                timeout = null;
                func.apply(context, args);
            }, wait)
        }
    }
}