前言

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

防抖

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

未应用防抖

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

应用防抖函数

当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)

节流

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

未应用节流

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

应用节流

每一秒钟执行一次输入

        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)