防抖与节流（2）---节流封装

节流

将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
理解：不管time内触发多少次，只会每间隔time时间才会触发一.

主要作用是也是减少触发 生效的次数；一般情况下用户会重复点击按钮，所以会造成重复发送请求问题，一定量造成卡顿延迟问题，这个时候便可以采用节流

直接上代码开整
相对于防抖，节流就简单些，节流主要会用到一个 ‘开关思想’
------上代码-----

var flag = true;
window.addEventListener('scroll',function(){
	if(flag){
		flag = false;
		setTimeout(()=>{
			console.log(123);
			flag = true;
		},1000);
	}
});

最常用的两种形式是：时间戳和定时器

//时间戳
 
var prev = Date.now();
var delay = 1000
window.addEventListener('scroll',function(){
	var now = Date.now();
	if (now - prev >= delay) {
		console.log(123); //业务逻辑
		prev = Date.now();
	}
});
//进行封装
var thro = function(fn, delay) {
    var prev = Date.now();
    return function() {
        var context = this;   //this指向window
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) {
            fn.apply(context, args);
            prev = Date.now();
        }
    }
}
function handle() {
    console.log('123');//业务代码
}
window.addEventListener('scroll', thro(handle, 1000));

//直接对示例代码进行封装
var thro = function(fn, delay) {
    var flag = true;
    return function() {
        var context = this;   //this指向window
        if (flag) {
			flag = false;
            setTimeout(()=>{
				fn.apply(context, args);
				flag = true;
			},1000);
        }
    }
}
function handle() {
    console.log('123');//业务代码
}
window.addEventListener('scroll', thro(handle, 1000));
 

---

节流主要是开关的思想，保证一段时间内只触发一次

---