防抖和节流学习记录

防抖和节流学习记录

说明：以监听屏幕大小改变（resize）demo来演示

function resize(){
	console.log('调节了屏幕的大小')
}
window.addEventListener('resize', resize)

1.防抖和节流函数（功能实现）

核心：利用闭包存储一个起始点（用于判断是否执行）

节流函数：函数在一段时间内多次调用，经过一定时间间隔后才可再一次执行（执行多次）

1. 时间戳

function throttle(func, delay) {
	let last = 0;
	return function () {
		let now = Date.now();
		if(now >= delay + last){  // 第一次执行时一定为true，所以触发后执行一次func
			func.apply(this, arguments);
			last = now
		}else{
			console.log('距离上次调用的时间差不满足要求哦')
		}
	}
}
window.addEventListener('resize', throttle(resize, 3000))

2. 定时器

function throttle(func, delay) {
	let timer = null;
	return function () {
		if(!timer){
			func.apply(this, arguments);
			timer = serTimeout(() => { //设定timer后，定时再将timer赋值null，才可再一次进入if
				timer = null
			}, delay)
		}else{
			console.log('距离上次调用的时间差不满足要求哦')
		}
	}
}
window.addEventListener('resize', throttle(resize, 3000))

3. demo 效果：执行多次
   

防抖函数：函数在一段时间内的多次调用，仅使得最后一次有效。（一段时间内只执行一次）

function debounce(func, delay){
	let timer;
	return function () {
		clearTimeout(timer);
		timer = setTimeout(() => {
			func.apply(this, arguments)
		}, delay)
	}
}
window.addEventListener('resize', debounce(resize, 3000))

效果：改变屏幕大小函数不执行，停止改变屏幕大小后待delay到达后执行一次

2.防抖和节流函数（进阶拓展）

上面的函数是有一个默认的执行时机的防抖是多次触发后只执行一次；节流是触发后执行一次然后隔一段时间才再一次执行。那么这个执行的时机应该给使用者自定义，所以在引入一个immediate，是否立刻执行一次

节流函数：

function throttle(func, delay, immediate){
    let timer = null;
    return function() {
        if(immediate){ // 存在就立马执行
            func.apply(this, arguments)
            immediate = false
        }
        if(!timer){
            timer = setTimeout(() => {
            	func.apply(this, arguments) // immediate不存在，delay到了事件再执行
            	timer = null
        	}, delay)
        }else{
            console.log('上一个定时任务尚未完成')
        }
 	}
}
window.addEventListener('resize', throttle(resize, 3000, false));

防抖函数：

function debounce (func, delay, immediate) {
	let timer = null;
	return function () {
		if(immediate && !timer){
			func.apply(this, arguments)
		}
		if(timer) clearTimeout(timer)
		timer = setTimeout(() => {
			func.apply(this, arguments)
		}, delay)
	}
}
window.addEventListener('resize', debounce(resize,3000,false))

3.运用场景

防抖：一般在用户输入时或者 resize事件，例如输入后校验，搜索框返回结果
节流：一般在滚动条事件，是否滑倒底部加载更多，100~500ms delay；鼠标不断点击触发

学习来源：
掘金作者：大帅老猿；
链接：https://juejin.cn/post/6962949488646291486