前端函数防抖(debounce)和函数节流(throttle)

什么是防抖和节流:  

比如搜索框，用户在输入的时候使用change事件去调用搜索，如果用户每一次输入都去搜索的话，那得消耗多大的服务器资源，即使你的服务器资源很强大，也不带这么玩的。

区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。函数防抖将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。函数节流使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

函数防抖

定义: 函数防抖就是在一段时间触发或调用函数时,只执行一次; 也可以理解为触发n毫秒之后才会调用一次

优点: 优化系统性能

例如每次用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。

如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。

应用场景：实时搜索（keyup）、拖拽（mousemove）

演示效果

代码片段

封装防抖函数

完整demo

还有一种方法只不过获取不到this 直接上代码 不发截图了

function debounce(fn,wait){

        var timer = null;

        return function(){

            if(timer !== null){

                clearTimeout(timer);

            }

            timer = setTimeout(fn,wait);

        }

    }

    function handle(){

        console.log('你好');

    }

    input.oninput=debounce(handle, 1000)

函数节流

函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下。

指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedowm)

时间戳版本

窗口大小改变时1秒执行一次

定时器版本

区别：
时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。