GPT每日面试题—防抖和节流

41 篇文章 2 订阅
26 篇文章 0 订阅

充分利用ChatGPT的优势,帮助我们快速准备前端面试。今日问题:防抖和节流?

Q:如果在前端面试中,被问到防抖和节流,怎么回答最全面,然后给出其各自的代码实现示例?

A:在前端面试中,被问到防抖和节流是常见的问题,因为它们是处理事件优化的两种常见方式。下面是一个全面的回答,包括它们的定义、用途、区别以及各自的代码实现示例。

公众号:Code程序人生,个人网站:https://creatorblog.cn

防抖

定义:防抖是一种技术,用于限制函数在连续触发事件后的执行次数。它将多个连续的函数调用合并成一次调用。

用途:

  • 防止频繁触发的事件(如窗口调整、输入框输入等)导致过多的资源消耗。
  • 在搜索框输入时,只在用户停止输入一段时间后再触发搜索请求,以减轻服务器负载。

区别:

  • 当连续触发事件时,防抖只会执行一次,而节流则会按照一定时间间隔执行。
  • 防抖适用于事件结束后执行某操作,而节流适用于在一段时间内以一定频率执行某操作。

代码实现示例:

function debounce(func, delay) {
  let timerId;
  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 示例用法
const debouncedFn = debounce(() => {
  console.log('Debounced function called');
}, 300);

// 触发事件时调用 debouncedFn

节流

定义:节流是一种技术,用于限制函数在一定时间间隔内的执行次数。它确保函数在一段时间内最多只执行一次。

用途:

  • 控制事件的触发频率,确保性能和流畅性。
  • 滚动加载、拖拽操作等场景中,限制事件处理的频率,避免过于频繁地执行操作。

区别:

  • 节流会按照设定的时间间隔周期性地执行函数,而防抖则在事件停止触发后执行函数。

代码实现示例:

function throttle(func, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 示例用法
const throttledFn = throttle(() => {
  console.log('Throttled function called');
}, 300);

// 触发事件时调用 throttledFn

这些实现都是简单的示例,实际使用中可能需要考虑更多情况,比如传入参数的处理、上下文绑定等。

  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CreatorRay

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值