JS中的防抖和节流

问题出现的场景：

我们在进行窗口的尺寸缩放resize，滚动scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，会导致用户体验不是很好。

此时，我们可以采用防抖（debounce）和 节流（throttle）的方式来减少调用频率，同时又不影响实际效果。

函数防抖

函数防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果在设定的时间到来之前，又一次触发了事件，就重新开始延时。

//持续滚动时，不执行handle函数，当1000ms（预设的时间）内没有滚动时，就会执行handel函数打印’1‘
function debounce(fun,wait){ 
            var timer = null;  
            return function(){
                if (timer !== null)clearTimeout(timer) 
                timer = setTimeout(fun,wait)

            }
        }
        //事件处理函数
        function handle(){  
            console.log('1')
        }
        window.addEventListener('scroll',debounce(handle,1000))

函数节流

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

   // 持续触发滚动时，并不会立即执行handle函数，而是每隔1000毫秒执行一次
        var throttle = function (func, delay) {
            var timer = null;
            return function () {
                var context = this;
                var args = arguments;
                if (!timer) {
                    timer = setTimeout(function () {
                        func.apply(context, args);
                        timer = null;
                    }, delay);
                }
            }
        }
        function handle() {
            console.log('执行了');
        }
        window.addEventListener('scroll', throttle(handle, 1000));

总结：

函数防抖：将几次操作合并为一次操作进行，原理是维护一个定时器，规定在操作事件不触发后，delay时间后就触发事件处理函数，但是如果操作事件在delay时间内再次触发的话，就会取消之前的定时器重新设置，这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数

相同点：

都是来减少处理函数调用的频率，又不影响实际效果，提升用户体验，实现性能优化。

不同点：

函数节流不管事件触发的有多频繁。都会保证在规定时间内一定会执行一次真正的事件处理函数，比较适合应用于滚动用ajax请求数据、鼠标不断点击触发，mousedown(单位时间内只触发一次)等；

而函数防抖只是在最后一次事件后才触发一次函数，适合应用于search搜索联想，用户在不断输入值时，用防抖来节约请求资源；window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。