JavaScript防抖与节流详解

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript防抖与节流详解脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

抖debounce

定义:对于短时间内连续触发的事件,比如滚动事件,防抖就是让某个时间期限内,事件处理函数只执行一次。

关于防抖,拿手指按压弹簧举例,用手指按压弹簧,一直按住,弹簧将不会弹起直到松开手指。

举例reSize:

function debounce(fn, wait){
    VAR timer = null;
    return ()=>{
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn, waIT);
    }
}
function handle(){
    console.LOG(Math.random());
}
window.addEventListener("resize",debounce(handle, 1000));

上面是非立即执行版

立即执行版

function debounce(fn, wait){
	let timeid, flag = true;
	return () => {
		clearTimeout(timeid);
		if(flag){
			fn();
			flag = false;
		}else{
			timeid = setTimeout(()=>{
				flag = true;
			}, wait);
		}
	}
}

拖动浏览器窗口,触发resize,此时并不触发handle函数,定时器计时,在计时时间内再次触发resize的话,则会从新计时,这样做的好处就是拖动浏览器窗口触发resize,并不会频繁执行handle函数,只让其在需要执行的时候去运行,有效的去除了冗余。

常见写法:

const debounce = (func, delay = 200) => {
  let timeout = null
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(this, arguments)
    }, delay)
  }
}

节流throTTLe

定义:让事件在一定时间内只执行一次。

本意是像水龙头的水滴一样,规定时间内只执行一次,减少频繁反复执行。

如搜索框input事件。

通过时间戳计算:

function throttle(fn,wait){
  let startTime = 0;
  return function(){
    let endTime = Date.now();
    if(endTime-startTime>wait){
      fn();
      startTime = endTime;
    }
  }
}

通过定时器:

function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript防抖与节流详解全部内容,希望文章能够帮你解决JavaScript防抖与节流详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。