函数节流

发表于   |  

函数节流

  • 处理的问题： 1. 短时间内连续多次重复触发 ; 2. 大量的 DOM 操作。
  • 函数节流：利用定时器使其降低频率和操作，提高性能
  • param： fn ：需要执行的函数 
    delay :  延迟执行的时间 
mustRunDelay : 可选，必须等待的时间
  • 主要思想：通过定时器，让函数延迟执行，如果在这个延迟的时间也有函数要执行，就阻止并清楚他。
    • 其次，闭包保存第一次函数开始执行的时间戳。
    • 第一个判断就是保存开始的时间
    • 第二个判断是查看是否超出必须等待的时间，如果超出，则立即执行函数，如果没有超出，重新设置定时器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var throttleV = function(fn, delay, mustRunDelay){
 	var timer = null;
 	var t_start ;
 	// 闭包
 	return function(){
 		var context = this, args = arguments, t_curr = +new Date();
 		clearTimeout(timer); //清除前面的定时器，以在延迟中最后一次函数准

 		// console.log(t_start);
 		if(!t_start){
 			t_start = t_curr;
 		}

 		if(t_curr - t_start >= mustRunDelay){
 			fn.apply(context, args);
 			t_start = t_curr;
 		}
 		else {
 			// console.log(t_curr - t_start);
 			timer = setTimeout(function(){
 				fn.apply(context, args);
 			}, delay);
 		}
 	};
 };

 // example
 var a= throttleV(function(){
 	console.log("1");
 },200,100)
 //  var b=throttleV(function(){
 // 	console.log(t_start);
 // },200,300)
a();a();a();