防抖和节流,提高性能

防抖、节流,性能优化

1、防抖

防抖就是防止抖动,当持续触发事件的时候,会合并事件而不会立即触发,在一定时间内不再触发那个事件的时候才会真正去触发事件

function debounce(fn, delay, ...rest) { 
	let timer;
	return function () {
		let that = this;
		if (timer) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => {
			fn.apply(that, rest)
		}, delay)
	}
}

2. 节流

节流就是持续触发某个事件,保证在一定的时间间隔内只触发一次

function throttle(fn, delay, ...rest) {
	let timer;
	return function () {
		let that = this;
		if (!timer) {
			timer = setTimeout(() => {
				timer = null;
				fn.apply(that, rest)
			}, delay)
		}
	}
}

防抖就是持续触发的时候,只触发一次事件,比如窗口的resize方法;节流就是在一定的时间间隔中只触发一次,比如表单输入控件的input事件

参考来源:

https://juejin.im/post/5b7b88d46fb9a019e9767405?utm_medium=fe&utm_source=weixinqun#heading-6

你可能感兴趣的:(性能优化,面试必问,js)