防抖与节流

防抖与节流

练习背景

页面中一个div,里面有数组,当鼠标移动时(mousemove事件),里面的数字进行++操作

防抖:例如时间为500ms,鼠标移动停止500ms后才进行++操作

节流:例如时间为500ms,鼠标不停地移动,在500ms内数字只进行一次++操作

防抖

单位时间内,频繁触发事件,只执行最后一次

核心思路

1. 声明一个定时器变量
2. 当鼠标每次滑动都先判断是否有定时器,如果有定时器先清除以前的定时器
3. 如果没有定时器则开启定时器,记得存到变量里面
4. 在定时器里面调用要执行的函数

//return一个函数的目的是为了可以在每次触发事件时都进行调用
function debounce(fn, time) {
	let timer
	return function () {
		if(timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(function(){
			fn()
		}, time)
	}				
}

节流

单位时间内,频繁触发事件,只执行一次

核心思路

1. 声明一个定时器变量
2. 当鼠标每次滑动都先判断是否有定时器,如果有定时器不开启新的定时器
3. 如果没有定时器则开启定时器,记得存到变量里面
4. 在定时器里面调用要执行的函数
5. 定时器里面清除定时器(因为任务完成了,要把定时器清掉,下一次可以继续开启新的定时器)

function throttle(fn, time) {
	let timer = null
	return function () {
		if (!timer) {
			timer = setTimeout(function() {
				console.log(this)
				fn()
				//这里不能用clearTimeout(timer) 因为此时定时器还在运作,不能进行删除
                //可以使用如下方法来清除定时器
				timer = null
			}, time)
		}
	}				
}