js中的防抖与节流

作用:用于解决用户操作行为过快导致的事件冲突以及浏览器卡顿问题

1.函数的防抖(在与前一个触发间隔较小时,前一个是事件触发将取消,最后一次执行在规定的时间之后才会触发,即连续多次触发事件只会执行最后一次触发事件)

运用示例:输入框输入文本时执行模糊推荐搜索

防抖代码大致代码演示

function throttle(method , context){ //method为回调方法,context为调用对象.
            clearTimeout(method.timer);
            method.timer = setTimeout(function(){
                                   method.call(context)
        },500)
}

2.函数的节流(在一定间隔时间内不会触发相同回调,每个一段时间才可再次触发.即在特定时间内只执行一次)

运用示例:各种按钮防止用户过快点击

节流代码大致代码演示

var canRun = true;
document.getElementById("...").onclick = function(){
        if(!canRun){
            return   
    }
    canRun = false
    setTimeout(function(){
        console.log("节流")
        canRun = true;
    },500)
}