理解JS防抖与节流及应用场景

概念与例子

函数防抖(debouncce)

在事件被触发n秒后在执行回调，如果在这n秒内又被触发，则重新计时

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

形象比喻例子:

节流防抖就好比乘电梯，比如delay是10秒，name防抖就是电梯每进来一个人就要等10秒再运行，而节流就是电梯保证每10秒可以运行一次

总结:假设无限次触发：防抖函数永远不会真正执行；节流函数则会按照间隔时间执行

函数封装与解释

防抖函数

思路:当事件触发时要经过防抖函数的拦截再进行触发，如果是第一次触发，则设置定时器，到n秒后自动触发，如果不是第一次触发，则有可能是连续触发，所以要清除定时器再重新计时，等到时间到n秒后再执行原函数。

<input id="input" >
    
    <script>
        let input = document.getElementById("input")
        function print(e){
     
            console.log(e.target.value)
        }
        let dounbuceP = dounbuce(print, 1000)

        input.addEventListener("keyup", function(e){
            dounbuceP(e)
        } )


        function dounbuce(fn, dalay){
            t = null
            return function () {
                let that = this,
                _args = arguments
                clearTimeout(t)
                t = setTimeout(() => {
                    t = null
                    fn.apply(that, _args)
                }, dalay)
            }
        }
    </script>

解释:为什么要fn.apply，因为这里是封装函数，需要尽量考虑周全。

节流函数

思路：既然在特定间隔的时间中一定要触发某个函数，那就需要设定开始时间和获取当前时间，通过时间差来判断是否要执行函数，如果没有达到这个时间，则再设置一个定时器等待执行，如果达到了，则立即执行，同时，开始时间要重置为当前时间。

throttle(fn, delay) {
				let t = null,
					begin = new Date().getTime();
				return function() {
					let _self = this,
						args = arguments,
						cur = new Date().getTime();
					clearTimeout(t)

					if (cur - begin >= delay) {
						console.log(cur)
						fn.apply(_self, args);
						begin = cur
					} else {
						t = setTimeout(function() {
							console.log("set")
							console.log(cur)
							fn.apply(_self, args)
						}, delay)
					}
				}
			},