函数节流 + 函数防抖

文章展示了JavaScript中实现防抖(debounce)和节流(throttle)函数的代码示例,这两种技术常用于优化事件处理,特别是频繁触发的事件如窗口滚动或按钮点击。防抖函数确保在设定延迟后只执行最后一次调用,而节流函数则保证在规定时间内至少执行一次。
摘要由CSDN通过智能技术生成
  <button id="myButton">Click me</button>
<script>
		  // 防抖产生一次
    function debounce(func, delay) {
      let timer = null;
      return function (...args) {
        const context = this;
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(context, args);
        }, delay);
      }
    };
  

    // 节流,规定时间内触发
    function throttle(func, delay) {
      let lastTime = 0; // 上次时间
      return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) { // 现在时间 - 上次时间  >=  传入间隔时间,在触发
          func.apply(this, args);
          lastTime = now; // 更新上次的时间
        }
      }
    };


    const myButton = document.getElementById('myButton');
    myButton.addEventListener('click', debounce(function (arg) {
      console.log('Button clicked!', arg);
    }, 1000));

    myButton.addEventListener('click', throttle(function (arg) {
      console.log('Button clicked!', arg);
    }, 1000));
   </script>
函数节流函数防抖都是为了减少目标函数的频繁执行,特别是那些计算量较大、耗费性能较多的函数函数节流适用于大量事件按照时间均匀触发的情况,而函数防抖适用于多次事件只需要响应一次的情况。 函数节流的实现方式主要是通过设置一个定时器,在指定的时间间隔内只执行一次目标函数。当事件触发时,如果定时器已经存在,则不执行目标函数,并重新开始计时,直到定时器到期后执行目标函数。这样可以将大量事件按照时间均匀分配触发,减少频繁执行目标函数的情况。 而函数防抖的实现方式是设置一个定时器,在指定的时间间隔内只执行一次目标函数。当事件触发时,如果定时器已经存在,则清除定时器并重新开始计时,直到定时器到期后执行目标函数。这样可以避免多次事件触发时频繁执行目标函数,只在最后一次事件触发后执行目标函数。 在JavaScript中,函数节流函数防抖可以通过编写相应的函数来实现。函数节流可以通过设置一个定时器,在指定的时间间隔内执行目标函数函数防抖可以通过设置一个定时器,在指定的时间间隔内只执行一次目标函数。 总结来说,函数节流函数防抖是为了减少频繁执行目标函数而设计的技术,在不同的场景中选择合适的方式可以提升性能和用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [js函数节流,js函数防抖](https://blog.csdn.net/MFWSCQ/article/details/100130519)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [js中的函数防抖函数节流](https://blog.csdn.net/m0_52900946/article/details/124778757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值