亲宝软件园·资讯

展开

JS防抖与节流

_雪菜肉丝面_ 人气:0

概念

防抖:点击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>

不然:

总结

加载全部内容

相关教程
猜你喜欢
用户评论