首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端面试题:"防抖"和"节流"

前端面试题:"防抖"和"节流"

作者头像
德顺
发布2022-05-26 08:57:10
4270
发布2022-05-26 08:57:10
举报
文章被收录于专栏:前端资源前端资源

能简单描述一下你对“防抖”和“节流”的认识吗?

防抖类似回城,打断就得重新回。节流类似技能需要冷却时间,到了才能用。 防抖:在限定时间内,总是执行最后一次。节流:在限定时间内,只会执行第一次。

防抖

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

代码实现:

/**
 * @description 防抖
 * @param fn 需要防抖的函数
 * @param delay 毫秒,防抖期限值
 */
function debounce(fn, delay) {
  let timer = null; // 借助闭包
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, delay);
  };
}

节流

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

代码实现:

/**
 * @description 节流
 * @param fn 需要节流的函数
 * @param delay 毫秒,节流期限值
 */
function throttle(fn, delay) {
  let valid = true;
  return function () {
    if (!valid) {
      //休息时间 暂不接客return false
    }
    // 工作时间,执行函数并且在间隔期内把状态位设为无效
    valid = false;
    setTimeout(() => {
      fn();
      valid = true;
    }, delay);
  };
}

由于节流是第一次生效,而防抖是最后一次生效,所以防抖会获取到最新数据。

未经允许不得转载:w3h5 » 前端面试题:"防抖"和"节流"

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 防抖
  • 节流
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档