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

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

防抖类似回城，打断就得重新回。

节流类似技能需要冷却时间，到了才能用。

防抖：在限定时间内，总是执行最后一次。

节流：在限定时间内，只会执行第一次。

防抖

所谓防抖，就是指触发事件后在 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);
  };
}

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

未经允许不得转载：Web前端开发资源网 » 前端面试题："防抖"和"节流"

推荐阅读：

Vue.js学习笔记——条件、循环、双向绑定

JQuery几个mouse事件的区别和用法

PHP连接MySQL数据库报错：Call to undefined function mysql_connect()的解决方法

Z-Blog 搜索报错：Cannot pass parameter 1 by reference 解决方法

分享一些实用的Chrome DevTools技巧