前端性能优化之防抖与节流-腾讯面经

防抖：每触发一次，等一定时间间隔，如果在这时间间隔里，又被触发重新计时,减轻服务器压力，应用场景如搜索框匹配，屏幕滚动，用户注册时候的手机号码验证和邮箱验证了，只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语等

function debounce(fn,delay){
    var timer=null   
    return function(){
            var that = this
            clearTimeout(timer)  //清空计时器
            timer = setTimeout(function(){
                    fn.call(that,3)
                        },delay)
                }
}

事例：
window.onscroll = debounce(function(value){
console.log(value)
},1000)

节流，在一定时间间隔内，多次触发，只执行一次，应用场景，如表单提交重复多次点击

function throttle(fn,delay){
    var flag = true  //标志位
    return function(){
        if(!flag) return
        flag =false
        var that = this
        setTimeout(function(){
                fn.call(that,3)
                 flag = true
                },delay)
        }
}

事例：
var h = document.getElementById('clc')
h.onclick=throttle(function(value){
console.log(value)
},1000)