【JavaScript】面试手撕节流，JavaScript面试手撕节流详解，JavaScript面试技巧揭秘，节流详解

温馨提示：这篇文章已超过469天没有更新，请注意相关的内容是否还可用！

摘要：本文将详细介绍JavaScript中的节流技术，帮助读者在面试中应对关于节流的问题。文章首先解释了节流的概念和重要性，接着通过实例展示了如何在JavaScript中实现节流，并分析了节流的工作原理和实际应用场景。阅读本文，读者可以深入了解节流技术，提升JavaScript技能，为面试做好准备。

【JavaScript】面试手撕节流，JavaScript面试手撕节流详解，JavaScript面试技巧揭秘，节流详解第1张

在面试中，JavaScript的节流技术是一个备受关注的话题，节流作为一种优化技术，主要用于限制函数的执行频率，以避免因高频率触发事件导致的性能问题，面试中的节流通常涉及对节流原理的深入理解，包括如何控制函数执行频率、使用场景以及可能的实现方式，掌握节流技术能够展示应聘者在前端性能优化方面的实力。

一、引入

在上一篇文章中，我们讲解了防抖技术，我们来深入探讨与防抖紧密相关的节流技术，并简要回顾两者之间的区别。

二、节流实例

生活实例

以女神回复舔狗为例，假设女神每天只回复一次，一旦今天已经回复过，无论舔狗发送多少信息，女神都不会再回复，只能等待明天。

短信验证

短信验证在生活中非常普遍，短信验证就运用了节流技术，由于发短信需要费用，为了避免用户重复点击导致多条短信的发送，采用节流技术确保一定时间间隔内只发送一次短信，获取验证码的有效时间为60秒，60秒内无法再次触发发送短信的方法。

三、手撕代码

我们一起来手写节流的代码实现，主要有两种实现方式：时间戳实现和定时器实现。

时间戳实现

原理每次事件触发时，都会检查上次执行的时间间隔，若超过指定的等待时间delay，则执行函数，并更新上次执行的时间为当前时间。

代码示例（省略了部分细节）

function throttleByTimestamp(fn, wait) {
  let lastTime = 0; // 保存上次执行的时间戳
  return function() {
    const currentTime = new Date().getTime();
    if (currentTime - lastTime > wait) {
      fn.apply(this, arguments);
      lastTime = currentTime;
    }
  };
}

使用示例：每隔500毫秒执行一次节流函数，具体实现可以根据需求自行添加。

定时器实现（省略了部分细节）

原理在事件触发时设置一个定时器，等待一段时间后执行函数，若定时器触发前有新事件触发，则重新设定定时器。

代码示例

function throttleByTimer(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(() => fn.apply(context, args), delay);
    }
  };
}