防抖与节流

2021-09-20 22:02:51 阅读：197 来源： 互联网

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

防抖

防抖，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)
            }
        }

标签：触发,防抖,console,节流,debounce,btn2
来源： https://blog.csdn.net/codemokey/article/details/120396048

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

防抖与节流

防抖

节流