A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 天树123 中级黑马   /  2020-10-28 14:38  /  1390 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

前言:
节流和防抖是面试中,常问的问题,那接下来就来分析一下,防抖和节流。

一、节流
定义:在规定的时间内,无论触发多少次,都只执行一次
主要思路利用时间戳判断,每次调用判断和上一次调用的时间差异确定是否需要调用。 throttle实际是一个工厂函数,可以将一个函数封装为一个带有节流功能的函数。
module.exports.throttle = (fn, delay) => {
  // 定义上次触发时间
  let last = 0;
  return (...args) => {
    const now = + Date.now();
    console.log("call", now, last, delay);
    if (now > last + delay) {
      last = now;
      fn.apply(this, args);
    }
  };
};

二、防抖
定义:在规定的时间内,如果触发了,那时间将会重新计算
实现的话可以使用定时器执行函数,新调用发生时如果旧调用没有执行就清除之前的定时器。
/**
* 防抖Debounce
*/
module.exports.debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    // 判断定时器是否存在,清除定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 重新调用setTimeout
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马