防抖与节流

一、防抖

1、定义：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。

2、为什么要防抖？

        有的操作是高频触发的，但是其实触发一次就好。比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。即等用户高频事件完了，在进行事件操作。

3、防抖的原理：你尽管触发事件，但是我一定在事件触发n秒无操作后才执行。

    例：我们规定3s为防抖的标准，那么:

        （1）第一次要求执行事件 - 此时倒计时3s

        （2）倒计时2s

        （3）倒计时1s

        （4）0.5s时事件再次被触发 - 此时倒计时3s

        （5）…3s内无事发生

        （6）执行事件，共用了5.5s

4、防抖怎么做？

 5、设计思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) {
			setTimeout(()=> {
				fn.apply(this, arguments);
				valid = true;
			}, delay)
			valid = false;
		}
	}
}

二、节流

1、定义：n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。

2、为什么要节流？

        防抖存在一个问题，事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。这里正确的思路应该是第一次点击就发送，然后上一个请求回来后，才能再发。即某个操作希望上一次的完成后再进行下一次，或者希望隔一段时间触发一次。

3、节流原理：如果你持续触发某个事件，特定的时间间隔内，只执行一次。

4、节流怎么做？

5、设计思路：我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) {
			setTimeout(()=> {
				fn.apply(this, arguments);
				valid = true;
			}, delay)
			valid = false;
		}
	}
}

 三、总结：

1、防抖和节流的相同点：防抖和节流都是为了阻止操作高频触发，从而浪费性能。

2、防抖和节流的区别：

防抖是让你多次触发，只生效最后一次。适用于只需要一次触发生效的场景。

节流是让你的操作，每隔一段时间触发一次。适用于多次触发要多次生效的场景。