函数的防抖和节流

为了避免在类似scroll，mousemove，resize等持续触发的事件中频繁的执行函数,出于优化性能的目的，使连续触发事件在 n 秒中只执行一次函数

1、防抖debounce(多次执行只执行最后一次)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

应用场景：

• 给按钮加函数防抖防止表单多次提交。
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
• 判断scroll是否滑到底部，滚动事件+函数防抖

    var debounce = function(fn,delay){
        var timer = null
        return function(){
            //清除上一次的定时器
            clearTimeout(timer)
            // 重新计时
            timer = setTimeout(function(){
                fn.apply(this)
            },delay)
        }
        
    }

2、节流throttle(每隔一段时间执行一次)

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

应用场景：

• DOM元素拖拽(mousemove)
• Canvas绘画

    //节流
    var thottle = function(fn,delay){
        var lastTime = 0
        return function(){
            var nowTime = Date.now()
            if(nowTime-lastTime>=delay){
                fn.call(this)
                lastTime = nowTime
            }
        }
    }
    //通过setTimeout实现
    var throttle2 = 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);                
            }            
        }        
    }
    document.onscroll = thottle(function(){console.log(111)},200)