JavaScript（九）：函数防抖和节流

最新推荐文章于 2025-02-10 09:03:19 发布

喝啤酒的猫

最新推荐文章于 2025-02-10 09:03:19 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38763173/article/details/105378350

本文介绍了JavaScript中用于优化性能的函数节流（throttle）和函数防抖（debounce）技术。函数节流适用于窗口调整、页面滚动等场景，通过限制执行频率来避免性能问题。自定义的节流函数包括时间戳版和定时器版。而函数防抖则确保在连续触发事件时，只执行最后一次，适合搜索框实时搜索等场景。文章还探讨了两者的区别，节流会立即调用并可能在连续触发时执行多次，而防抖则延迟调用且只执行最后一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数防抖和节流

前言

一些浏览器事件，window.onresize、window.onmousemove等，触发的频率非常高，会造成浏览器性能问题；如果向后台发送请求，频繁出发，也会对服务器造成不必要的压力。

那么如何限制事件处理函数频繁调用呢？
就是函数节流和函数防抖
在这里插入图片描述

函数节流（throttle）

函数触发后，会立即执行一次函数，若多次持续触发事件，则会在多次触发的这个时间内，每隔一段时间执行一次。
适合多次事件按照时间做平均分配触发

使用场景

窗口调整（resize）
页面滚动（scroll）
DOM元素拖拽功能实现（mousemove）
抢购疯狂点击（click）

自定义throttle函数

1、时间戳版

function throttle(fn , delay){
   
   
      let pre = 0

      return function(){
   
   
        let now = Date.now();
        let that = this
        let args = arguments
        
        if(now - pre >= delay){
   
   
          fn.apply(that , args)
          pre = now
        }
      }
    }