防抖与节流

防抖和节流是两种常见的编程思路，用于减缓事件触发频率，减轻浏览器、服务器等的压力，优化体验。

具体执行方法如下。

防抖

防抖，debounce，需满足事件间隔条件。即一个事件触发后，如果被重复触发，则会重新计算时间，时间走完之后，才会执行相关操作。

应用场景：百度搜索框联想搜索关键词。

//debounce函数 
        //可以重复触发但是每次触发后回调函数的延时重新计时
        var btn1 = document.querySelector('#btn1')
        btn1.onclick = debounce()
        function debounce() {
            console.log('clicked')
            var timer = null
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    console.log('触发技能')
                },3000)
            }
        }
        function fun1() {
            console.log('触发技能')
        }
           

节流

节流，throttle，需满足时间间隔条件。即一个事件被触发后，在接下来一段时间内不能被重复触发。重复触发无效，时间不会累加。

应用场景：减少ajax发送频率。

//throttle函数
        // 不可以重复触发，必须等间隔时间耗尽才能进行下一次触发
        var btn2 = document.querySelector('#btn2')
        btn2.addEventListener('click', throttle2)
        function throttle2() {
            let cdFlage = false
            if (cdFlage) { return }
            else {
                cdFlage = true
                btn2.disabled = true
                console.log('节流')
                clearTimeout(timer2)
                var timer2 = setTimeout(() => {
                    btn2.disabled = false
                    cdFlage = false
                }, 3000)
            }
        }