乐趣区

关于javascript:谈谈js的防抖与节流

jiezi

前言

开始正式文章之前，先来说一种咱们在前端开发过程中常常会遇到的场景。在页面中通常都会有输入框用作搜寻数据，而这些数据往往由前端发送申请到后端获取，如果用户始终在输入框中输出，那么将会始终不停地发送申请，显然这不是咱们想看到的后果，而防抖与节流将可能对此利用场景做出优化。

防抖

防抖：当继续触发某事件时，并不立马执行事件处理函数，而是在肯定工夫内不再触发事件时才会执行一次，如果设定的工夫到来之前，又一次触发了事件，那就从新计时。
当初用鼠标的 onmousemove 事件模仿这个过程：

  1. 未应用防抖

鼠标一放上去就执行屡次，如果这是申请，就会短时间内大量申请，影响整体性能。

  1. 应用防抖函数

当 onmousemove 完结后 1s 再执行 print 函数，这里用到闭包，不理解的，能够看我的文章《谈谈什么是闭包？》

        let num = 0;
        // 防抖函数
        function debounce(fn, delay){
            let timer = null;
            return function () {if (timer){clearTimeout(timer);
                }
                timer = setTimeout(fn, delay);
            }
        }

        function print(){console.log("已执行" + ++num + "次");
        }
        document.getElementById("box").onmousemove = debounce(print, 1000)

节流

节流：当继续触发事件时，保障肯定时间段内只调用一次事件处理函数。事件尽管继续触发，然而咱们能够设定一个固定工夫距离去执行它，每隔多长时间执行一次，而非始终去执行。前言中提到的利用场景就非常适合用节流的思路来解决，就以此为例来演示节流。

  1. 未应用节流

未应用节流时，每次进行输出都会执行事件函数。

  1. 应用节流

每一秒钟执行一次输入 

        let num = 0;
        // 节流函数
        function throttle(fn, delay){
            let timer = null;
            let nextFlag = true; // 用标记位来判断是否完结了一次执行
            return function () {if (nextFlag){
                    nextFlag = false;
                    timer = setTimeout(function () {fn();
                        nextFlag = true;
                    }, delay);
                }

            }
        }
        function print(){console.log(` 已执行 ${++num}"次, ${document.getElementById("search").value}`);
        }
        document.getElementById("search").onkeydown = throttle(print, 1000)

退出移动版