其他分享
首页 > 其他分享> > 实现节流去抖函数,初中级前端面试必考知识点

实现节流去抖函数,初中级前端面试必考知识点

作者:互联网

完整高频题库仓库地址:https://github.com/hzfe/awesome-interview

完整高频题库阅读地址:https://febook.hzfe.org/

节流

1. 基本概念

throttle(func, wait)

每 wait 毫秒内最多只调用一次 func。

2. 应用场景

3. 流程图

4. 编写代码

function throttle(func, wait) {
  let lastTime = 0;
  let timer = null;

  return function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    let self = this;
    let args = arguments;
    let nowTime = +new Date();

    const remainWaitTime = wait - (nowTime - lastTime);

    if (remainWaitTime <= 0) {
      lastTime = nowTime;
      func.apply(self, args);
    } else {
      timer = setTimeout(function () {
        lastTime = +new Date();
        func.apply(self, args);
        timer = null;
      }, remainWaitTime);
    }
  };
}

去抖

1. 基本概念

debounce(func, wait)

自最近一次触发后延迟 wait 毫秒调用 func。

2. 应用场景

3. 流程图

4. 编写代码

function debounce(func, wait) {
  let timer = null;

  return function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    let self = this;
    let args = arguments;

    timer = setTimeout(function () {
      func.apply(self, args);
      timer = null;
    }, wait);
  };
}

标签:function,知识点,初中级,timer,let,必考,func,null,wait
来源: https://blog.csdn.net/HZFEStudio/article/details/120585197