防抖与节流

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

防抖

防抖,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)
            }
        }
上一篇:【JavaScript】防抖函数的实现


下一篇:js代码-防抖函数(立即执行和非立即执行)