深入理解函数防抖节流

最新推荐文章于 2022-07-08 16:34:02 发布

原创最新推荐文章于 2022-07-08 16:34:02 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

写在前面：防抖（debounce）节流（throttle）这两个单词千万别写错，工作当中好多人自己封装的函数都写反了。
防抖debounce: 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。
2-1. 实例(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；实例(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；
简单实现代码：
3-1.

var debounce = function(idle, action){
   	var last
	 return function(){
   		var ctx = this, args = arguments
  	 	clearTimeout(last)
  	 	last = setTimeout(function(){
       	action.apply(ctx, args)
 	  }, idle)
 	}
}

3-2. es6写法
3-2-1.

export const debounce = (fn, delay) => {
 let timer = null;
 return (params) => {
   clearTimeout(timer);
   timer = setTimeout(() => {
     fn(params);
   }, delay);
 };
};

节流throttle：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
4-1. 实例：(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
简单实现代码：
5-1.

var throttle = function(delay, action){
 var last = 0;
 return function(){
   var curr = +new Date()
   if (curr - last > delay){
     action.apply(this, arguments)
     last = curr 
   }
 }
}

5-2. es6写法
5-2-1.

export const throttle = (fn, delay) => {
 let last = 0;
 return (params) => {
   const curr = +new Date();
   if (curr - last > delay) {
     fn(params);
     last = curr;
   }
 };
};