概念

防抖：点击n次提交按钮，只有最后一次会发出请求。减少无效请求的次数。

节流：每点击一次按钮，都会失效一段时间。降低触发的频率。

实现

/*
防抖
时限内，只有最后一次调用会执行
*/
function debounce(func, interval = 0) {
	let timer;
	return function () {
		if (timer) {
			cleartimeout(timer);
		}
		timer = settimeout(() => {
			func()
		}, interval)
	}
}
/*
节流
执行之后会失效一段时间
*/
function throttle(fn, interval=0, immediate=true) {
	let valid = true
	return function () {
		if (!valid) {
			return
		}
		valid = false
		if (immediate) {
			fn()
			settimeout(() => {
				valid = true;
			}, interval)
		} else {
			settimeout(() => {
				fn()
				valid = true;
			}, interval)
		}
	}
}

测试

function say() {
	console.log(1)
}
var a = debounce(say, 1000)
var b = throttle(say, 1000)
var c = throttle(say, 1000, false)

<button onclick="a()">测试防抖</button>
<button onclick="b()">测试节流一</button>
<button onclick="c()">测试节流二</button>

效果：

防抖。

节流，立即执行。

节流，延时执行。

注意事项

原理：闭包。每调用一次都会对应一个闭包。

不能够像下面这样写：

<button onclick="debounce(say, 1000)()">测试防抖</button>
<button onclick="throttle(say, 1000)()">测试节流一</button>
<button onclick="throttle(say, 1000, false)()">测试节流二</button>

不然：

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。