my canteen
登录       注册

您现在的位置是:网站首页 > 学无止境

节流与防抖

王伟2020年9月22日38人围观
简介节流与防抖

节流与防抖

函数节流

实现思想

1.在一段时间内只执行一次,无视其他函数的调用请求。

2.时间戳:用时间戳来判断是否已经到执行时间,如果是则执行,并更新当前时间为上一次执行的时间戳。

    // 时间戳方案
    function throttle(fn, interval) {
      var pre = Date.now();
      return function () {
        var args = arguments;
        var now = Date.now();
        if (now - pre >= interval) {
          fn.apply(this,args)
          pre = Date.now();
        }
      }
    }

3.定时器:使用定时器来触发回调,比如设置一个1000ms的定时器,每次触发scroll事件就会触发回调函数,如果已经存在定时器,则回调不执行,直到存在的定时器被清除,重新设置新的定时器

function throttle(fn, interval) {
  let flag = true;
  return funtion(...args) {
    let context = this;
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(context, args);
      flag = true;
    }, interval);
  };
};

函数防抖

实现思想

每次事件触发则删除原来的定时器,建立新的定时器。跟王者荣耀回城功能类似,你反复触发回城功能,那么只认最后一次,从最后一次触发开始计时。

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    let context = this;
    if(timer) clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

但这样可能出现一个问题,就是防抖触发一直处于频繁状态,我们又希望在一定时间内返回一个响应,这样我们就需要将防抖与节流结合起来。

加强版节流

function throttle(fn, waitTime) {
        // previous是上一次执行fn的时间,timer是定时器
        let previous = 0, timer = null;
        return function (...args) {
            let now = +new Date() ;// 获取当前时间
            // 新增部分
            if(now - previous < waitTime) { // 时间差小于时间间隔
                // 为本次触发操作设置一个新的定时器
                // 定时器结束后执行fn
                if(timer) clearTimeout(timer);
                timer = setTimeout(() => {
                    previous = now;
                    fn.apply(this, arguments);
                }, waitTime);
                // 新增部分结束
            } else {
                previous = now;
                fn.apply(this, arguments);
            }
        }
    }

路漫漫其修远兮,吾将上下而求索!


文章评论

来说句话吧.... 共有评论数:0条


微信二维码 博主微信 qq二维码 博主QQ
177****8743
7*24小时电话