JS面试题---什么是节流和防抖？怎样手写一个自己的节流和防抖工具函数

Single

已于 2024-06-07 20:09:43 修改

阅读量1k

点赞数 20

分类专栏：面经文章标签： javascript 前端面试

于 2024-02-08 09:25:20 首次发布

本文链接：https://blog.csdn.net/2202_75922690/article/details/136072899

版权

面经专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了节流和防抖两种技术的概念，手写实现代码示例，以及它们在解决多次点击、搜索联想、滚动事件等场景的应用。重点阐述了两者之间的区别和适用场景，强调了这两种技术在优化性能和提升用户体验中的作用。

摘要由CSDN通过智能技术生成

技术背景:

相信以下场景你都不陌生

多次点击按钮导致页面失去响应或者出现意外情况。
如何实现搜索联想功能以及各企业邮箱提示功能。
页面滚动、输入框输入以及窗口尺寸变化频繁触发事件。
手机号、邮箱格式的实时校验
…

为了解决或者实现这类场景，优化性能和改善用户体验。衍生出了一种技术，防抖(debouce)和节流(throttle)

一、概念

防抖（debounce）

延迟执行函数，直到一段连续的时间内没有新的事件被触发。

解释：当一个事件在一段时间内连续触发时，只有最后一次触发且经过一定时间后才会执行相应的处理函数
类比：王者荣耀的回城效果，多次点击回城会一直重置回城时间，只有停止点击回城并等待一段时间后才会实现回城功能。

具体来说，当触发一个事件时，防抖函数会启动一个定时器，延迟一段时间执行事件处理函数。如果在这段时间内又触发了同样的事件，就会清除之前的定时器，并重新设置一个新的定时器。只有在最后一个事件触发后，经过一段时间内没有新的事件再次触发时，事件处理函数才会被执行。

节流(throttle）

确保函数在一定时间间隔内最多执行一次，无论事件触发频率如何。

解释：在一段时间内，无论事件触发频率如何，处理函数能且仅能触发一次。
类比：王者荣耀中，在技能的CD周期内，技能仅能触发一次，而且是从第一次触发时开始执行。

具体来说，当触发一个事件时，节流函数会立即执行该事件处理函数，然后在设定的时间间隔内，如果再次触发相同的事件，节流函数会忽略该事件，直到这段时间间隔过去，才会重新触发执行。

二、手写实现

防抖(debounce)

<html>
	<button>打印</button>
	
	<script>
	  /*
	  ******封装防抖工具函数 myDebouce *******
	  */
	  // fn 需要添加防抖效果的函数(回调函数)，delay 延迟时间
	  const myDebounce = (fn,delay = 500)=>{
	    // 存储上一次的延时器
	    let timer;
	    return function (...args) {
	      // 清除上一次的延时器
	      clearTimeout(timer);
	      // 重置新的延时器
	      timer =  setTimeout(()=>{
	        fn(...args)
	      },delay)
	    }
	  }
	  // 定义处理函数，并添加防抖效果
	  const click = myDebouce(function(message){
	    console.log(message);
	  },1000)
	  // 绑定点击事件
	  document.querySelector('button').addEventListener('click',function () {
	    click('防抖成功')
	  })
 	</script>
 </html>

如果一直点击按钮，事件不会触发，停止点击delay毫秒后，事件触发

节流（throttle）

方法一：使用时间戳的写法

<html>
	<button>打印</button>
	
	<script>
	  /*
	  ******封装节流工具函数 throttle*******
	  */
	  // fn 需要添加节流效果的函数(回调函数), T 时间周期,T的默认值是500ms
	  const myThrottle = (fn,T = 500)=>{
	    // 储存上一次函数执行的时间戳
	    let old = 0
	    return function (...args){
	      // 获取当前时间戳
	      const now = new Date().getTime()
	      // 判断当前时间戳与上一次触发的时间戳差值是否大于时间周期
	      if( now - old >= T){
	        fn(...args);
	        // 更新上一次执行的时间戳
	        old = now;
	      }
	    }
	  }
	  // 定义处理函数，并添加节流效果
	  const click = myDebouce(function(message){
	    console.log(message);
	  },1000)
	  // 绑定点击事件
	  document.querySelector('button').addEventListener('click',function () {
	    click('节流成功！按周期，每秒打印一次,无论频率多高')
	  })
 	</script>
 </html>

方法二：使用定时器 setTimeout 的写法

  // fn 需要添加节流效果的函数(回调函数), T 时间周期
  const myThrottle = (fn,T)=>{
    // 通过闭包保存一个 “节流阀”，默认为false
    let flag = false
    return function (...args){
      // 节流阀存在，表示已经执行
      if(flag){
        return
      }
      else {
        flag = true; //立刻将节流阀设置为true，表示处理函数正在执行
        setTimeout(() => {
          fn(...args)
          //关键！！！！ 执行完毕，重置节流阀为false
          flag = false
        }, T);
      }

    }
  }
  // 绑定事件
  const click = myThrottle(function (message) {
    console.log(message)
    },1000)

  // 绑定点击事件
  document.querySelector('button').addEventListener('click',()=>{
    click('节流成功')
  })