防抖节流函数

节流

原理:

避免处理函数被频繁触发,让函数每隔一段时间执行一次。党在执行周期内被触发时,不允许被执行,所以直接为函数的执行添加时间间隔就OK了。

实现:

function throttle(fn, mustRun = 500) {
	let previous = null;
	return function(...args){
		let context = this;
		let now = new Date();
		if (!previous) {
			previous = now;
		}
		let sub = now - previous;
		if (mustRun && sub >= mustRun) {
			fn.call(context, args);
			previous = now;
		}
	}
}

应用场景:

图片懒加载: 当在一个页面有很多的图片时,为了减轻服务器负担,同时能在页面迅速渲染出图片,我们选择只加载窗口可视区的图片,这时通过为滚动事件的处理函数添加节流操作即可。

防抖

原理:

当DOM事件被频繁触发时,在延期周期内,只在最后一次被触发时执行处理函数,在此之前的触发都不进行处理。通过定时器在延时周期内,清除之前的
DOM操作触发的处理函数,只执行最后一次的处理函数。

实现:

function debounce(fn, delay = 500) {
	let timer = null;
	return function (...args) {
		let context = this;
		clearTimeout(timer);
		timer = setTimer(function() {
			fn.call(context, args);
		}, delay)
	}
}

应用场景:

输入框及时查询:当输入框输入查询条件变化时,希望能够及时根据条件向后台获取查询结果。假设,一秒钟输入了十个字符就会触发十次的查询。此时,可以使用函数防抖只在最后一次输入后的N秒后执行。

你可能感兴趣的:(JavaScript)