性能优化:防抖与节流

防抖

在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。一些浏览器件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题，如果你碰到这些问题，那就需要用到函数节流和防抖了。

这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

function debounce(fn) {
            let timer7 = null;
            return function () {
                clearTimeout(timer7)
                timer7 = setTimeout(fn, 1000)
            }
        }
// 延迟处理事件
$('#clickBtn').click( debounce(function () {  console.log('点击事件被触发' + Date.now()) }))

节流

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

var throttling = (fn, wait, immediate) => {
            let timer, timeStamp = 0;
            let context, args;
            let run=()=>{
                timer=setTimeout(()=>{
                    if(!immediate){
                        fn.apply(context,args);
                    }
                    clearTimeout(timer);
                    timer=null;
                },wait);
            }
            return function () {
                context=this;
                args=arguments;
                if(!timer){
                    console.log('throttle set');
                    if(immediate){
                        fn.apply(context,args);
                    }
                    run();
                }else{
                    console.log('throttle,ignore')
                }
        }
}
$('#clickBtn').click(throttling(function () { console.log('点击事件被触发') }, 1000.6000))