节流与防抖

节流与防抖，这两个词经常会出现在前端的应用中，很多时候我们只是该用的时候使用它，往往却不喜欢花时间理解亦或者是看到的逻辑较复杂，一时间无法记住重要的导致全部都被大脑清除掉了，所以我留下这个既不需要大费周章去理解，而简单看看就能很容易理解的记录

什么是节流与防抖？

节流：立即触发一次事件，在事件触发后的一段时间内再次触发事件不执行并且会将时间重置

        let box = document.getElementById('box');  // 获取需要进行操作的dom元素
        // 将dom元素设置事件监听
        box.addEventListener('click', function() {
        	// 将行为与节流函数绑定
            debounce(() => {console.log('111')}, 500);
        })
        
        // 创建节流操作
        let timer = null;  // 1.设置延时标签
        function debounce(fn, delay) {
            // 2.进入函数后，当定时器存在时将定时器清空，否则生成定时器
            if (timer) {
                clearInterval(timer);
            }
            // 3.重新生成延时器
            timer = setTimeout(fn, delay);
        }

这里的话我们只需要理解节流操作的第2步操作

当第一次进入函数后，延时器timer为空，那么我们会生成延时器
如果后续未在等待时间(delay)范围内再次触发节流操作，那么fn会被执行，控制台打印出111
如果后续在等待时间(delay)范围内再次触发节流操作，那么延时器会被清空，并且重新生成

防抖：在事件持续触发的情况下一段时间只会触发一次的事件

        let box = document.getElementById('box');  // 获取需要进行操作的dom元素
        // 将dom元素设置事件监听
        box.addEventListener('click', function() {
        	// 将行为进行防抖函数绑定
            throttle(() => {console.log('111')}, 1000);
        })

		// 创建防抖操作
		let valid = true;  // 1.创建验证
        function throttle(fn, delay) {
        	// 2.如果验证未通过则弹出函数，不往下执行
            if (!valid) {
                return;
            }
            // 3.将验证设置为失效状态
            valid = false;
            // 4.设置延时器
            setTimeout(() => { valid = true; fn(); }, delay)
        }

这里的话我们只需要理解第2步

当第一次进入函数时 验证通过了 => 验证状态变为失效 => 执行延时器,
如果后续未在等待时间(delay)范围内再次触发防抖操作，那么fn会被执行，控制台打印出111，并且验证状态会变为有效
如果后续在等待时间(delay)范围内再次触发防抖操作，在验证为失效状态下触发函数会被弹出，反复执行第2步，直至延时器执行完毕才可再次进入第3步

此文章仅为个人简浅理解，不做深入研究，欢迎指正