简单了解防抖(debounce)与节流(throttle)

本文介绍了JavaScript中防止函数频繁执行的两种技术:防抖(debounce)和节流(throttle)。防抖确保在特定时间内只执行一次函数,如果在设定时间内再次触发事件,会重新计时。节流则是在设定的时间间隔内,无论事件触发多少次,只执行一次函数。这两种方法常用于优化高频触发的事件,如onmousemove、onscroll,以减少服务器压力和提升页面性能。
摘要由CSDN通过智能技术生成

防抖(debounce)与节流(throttle)

防抖(debounce)

在平时的开发过程中,往往会绑定鼠标移动事件onmousemove,滚动滚动条事件onscroll等等。而这些事件会高频触发,如果我们绑定onkeyup事件发请求去服务端检查,在客户输入的过程中,事件的触发频率会很高,造成服务器压力大,页面卡顿的情况。对客户体验造成不好的影响,防抖和节流就可以解决这种问题

防抖简单来说:就是在规定的时间内只让你执行一次,如果在时间内又一次触发了此事件,则会重新计算时间,直到你不在触发此事件,并等待一定时间,才会执行事件中的函数。

// 延迟执行版防抖
function count() {
   
           console.log(1)
       }
 function debounce(fn, time) {
   
         let timer;
       return function () {
   
              clearTimeout(timer); // 如果在1秒钟内重复点击,会清除上一个定时器,下面的定时器将重新计算时间
           timer = setTimeout(() => {
   
                fn()               // 将函数放在定时器中,1秒钟之后执行。
           }, time);
      }
  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值