首页 > 其他分享 >防抖

防抖

时间:2023-05-09 10:11:05浏览次数:25  
标签:function 防抖 timer delay let scrollTop

<script>
function Test(fn,delay){

  let timer = null;
  return function () {
  if(timer){
    clearTimeout(timer);
  }
  timer = setTimeout(fn,delay);

  }

}

window.onscroll=Test(scrollHandle,200);
function scrollHandle(){
   let scrollTop = document.documentElement.scrollTop;
   console.log(scrollTop);

}

</script>

标签:function,防抖,timer,delay,let,scrollTop
From: https://www.cnblogs.com/zzk0529/p/17384060.html

相关文章

  • JS高级(作用域,原型链,闭包,节流,防抖等概念性)
    作用域局部作用域函数作用域在函数内部声明的变量只能在函数内部被访问,外部无法直接访问块作用域let和const声明的变量会产生块作用域,var不会产生块作用域,推荐使用let和const全局作用域在<script>和.js文件的最外层就是全局作用域,在此声明的变量在其他任何作用域都可以被......
  • lazyload&防抖动和节流阀
    title:07-自定义按键修饰符&自定义指令publish:falselazyload用的最多的场景是:图片lazyload组件lazyload现在一般都单独做css的lazyload或者js的lazyload,因为这种方式,其实还是要加载图片和组件。图片lazyload图片一般是页面最大的资源,所以非首屏延迟加载很重要(......
  • 防抖和节流
    1.debounce(防抖)和throttle(节流)的定义口语版:防抖就是只有当小明连续10天不捣蛋时,小明爸爸才给他零花钱。如果在这10天内小明捣蛋了,那么重新计算,直到满足了10天不捣蛋的条件,小明爸爸才给零花钱。一年下来小明居然只拿到了5次零花钱,你说气人不?节流就是无论小明捣蛋不捣蛋,小明......
  • vue2 input防抖功能
    1.在el-input绑定@input事件 2.在data中定义timer为null 3.在methods中定义@input绑定的方法 4.在setTimeout中调用对应处理的方法<el-inputstyle="width:140px;color:#FF8900"size="small"v-model="singleDiscountForm.discount"@input="inputDis......
  • js节流和防抖
    节流(throttle):指连续触发事件的函数,在一定时间间隔内只执行一次。functionthrottle(fn,delay){lettimer=null;returnfunction(){constself=this;constargs=arguments;if(!timer){timer=setTimeout(function(){timer......
  • 防抖和节流及多种实现方式
    当用户在网页中进行操作时,如点击、滚动、输入等,往往会频繁地触发事件。如果每个事件都立即执行相应的函数,可能会导致性能问题和用户体验不佳,因为这些函数可能需要执行复杂的操作,如计算、网络请求等。为了优化这种情况,我们可以使用防抖和节流来限制函数的调用次数,从而提高性能和用......
  • js实现防抖(debounce)与节流(throttle)
    防抖(debounce)一句话概括:防抖是给定一个时间周期,如果触发事件的周期小于该事件(也就是触发过快),则不会触发事件。举个例子:我给定的时间周期是1s,如果我在触发第一次事件后1s内触发该事件,则重新开始计时,直到触发周期大于1s才会执行事件的方法。functiondebounce(fn,timeout){......
  • js-防抖和节流的区别及实现
    函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过......
  • 函数防抖
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • JS中的函数防抖
    一、什么是函数防抖概念:函数防抖(debounce),就是指触发事件后,在n秒内函数只能执行一次,如果触发事件后在n秒内又触发了事件,则会重新计算函数延执行时间。举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待10秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就......