首页 > 其他分享 >防抖

防抖

时间:2022-09-22 16:46:18浏览次数:36  
标签:function 防抖 task args timer delay

 

function debounce(fn, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

// 测试
function task() {
  console.log('run task')
}
const debounceTask = debounce(task, 1000)
window.addEventListener('scroll', debounceTask)

 

标签:function,防抖,task,args,timer,delay
From: https://www.cnblogs.com/qingshuihongye/p/16719852.html

相关文章

  • 防抖、节流 函数
    节流functionthrottle(fn,interval){letenterTime=0//触发的时间constgapTime=interval||1000//间隔时间,如果interval不传,则默认1000msreturnf......
  • vue中防抖函数的写法以及用法
    1.准备好防抖函数functiondebounce(func,wait){lettimeout;returnfunction(...args){if(timeout)clearTimeout(timeout);l......
  • 节流与防抖
    防抖:在频繁触发事件时,事件只执行一次,并且是最后一次触发的时候主要思想:给需要触发业务代码加上一个定时器,并且如果在定时器设定的时间内,该业务代码再次被触发,则清除上一次......
  • 第 3 题:什么是防抖和节流?有什么区别?如何实现?
    防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间思路:每次触发事件时都取消之前的延时调用方法functiondebounce(fn)......
  • 前端性能优化-防抖
    防抖:如果短时间内大量触发同一事件,只会执行一次函数,将多次执行变为最后一次执行。防抖函数的应用场景:按钮提交场景:防⽌多次提交按钮,只执⾏最后提交的⼀次服务端验证......
  • 实现防抖和节流,原理介绍+应用场景
    防抖和节流都是为了解决事件被频繁触发的问题防抖(debounce)原理:当持续触发事件时,在设定的时间内没有再次触发事件,则事件才会处理函数一次;如果在设定时间之前再次触......
  • 防抖和节流
    防抖就是在固定事件内连续请求时,只处理最后一次的请求(用定时器解决)将请求过程设定时间,在该时间内重复发送请求会刷新时间。 节流就是在规定时间内,只接受第一次的请求(定......
  • 防抖节流
    防抖节流(重点)浏览器的极限绘制频率60侦,计时器的话大概为16.666高频触发的业务:抽奖登录动画网络加载等等需要//登录防抖functionfangdou(cb,delay){vartimer......
  • js实现防抖节流
    前端项目开发过程中,对一个dom元素动作绑定了事件,但触发dom函数的动作过于频繁从而影响页面性能甚至出现bug的情况,比如:页面滚动scroll事件、浏览器窗口resize事件、输入框......
  • 防抖和节流
    防抖和节流防抖/* 应用场景:当用户进行了某个行为(如点击)之后,不希望每次行为都会触发方法,而是行为做出后,一段事件内没有再次重复行为,才给用户响应. 实现原理:每......