JavaScript防抖与节流代码示例解析

作者:袖梨 2022-06-29

本篇文章小编给大家分享一下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)
    }
  }
}

相关文章

精彩推荐