js防抖节流

初一Y

已于 2023-02-01 13:21:22 修改

阅读量79

点赞数

文章标签：原型模式

于 2023-02-01 10:36:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43247781/article/details/128828410

版权

文章介绍了JavaScript中两种常见的性能优化技巧——防抖(debounce)和节流(throttle)。防抖技术确保在固定时间间隔内只执行一次函数，常用于窗口resize事件或输入验证。节流则是在一定时间内合并多次事件调用，例如滚动事件或表单提交。文中提供了防抖和节流的函数封装示例，包括通过定时器和时间戳实现的方法。

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

1. 防抖

     防抖=》固定的时间内，事件只允许发生一次
     // 防抖封装
     //func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
        function debounce(func, delay){
        var timer = null;
        return function(){
            var that = this;
            var args = arguments
            //每次触发事件 都把定时器清掉重新计时
            clearTimeout(timer)
            timer = setTimeout(function(){
            //执行事件处理程序
            func.call(that, args)
            }, delay)
          }
        }

2. 节流

       节流=》一定时间内多个事件合成一个
       应用场景=》1. 提交表单 2. 高频监听事件
    1）、通过定时间器节流
    //event是事件处理程序，time是事件执行的延迟时间，单位：毫秒
       function throttle(event,time){
        let timer=null
        return function(){
            if(!timer){
                timer=setTimeout(()=>{
                    event();
                    timer=null;
                }，time)
            }
        }
       }
    2）、通过时间戳 节流
    //func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
    function throttle(func, delay){
      //定义初始时间(开始触发事件的时间)
      var start = 0;
      return function(){
        var that = this;
        var args = arguments;
        //获取当前时间戳
        var current = Date.now();
        // 判断当前时间与初始时间是否超过间隔
        if(current - start >= delay){
          //执行事件处理程序
          func.call(that, args)
          //更新初始时间
          start = current;
        }
      }
    }