huangtaoya
侠客
侠客
  • 最后登录2020-03-26
  • 发帖数10
阅读:6317回复:0

[js]函数防抖和节流

楼主#
更多 发布于:2019-05-10 10:22
在某些场景下,函数的频繁或者事件的频繁触发会大大降低浏览器的性能,甚至有可能造成浏览器崩溃。
因此针对这类事件要进行优化处理。
函数节流和防抖,两者都是对高频率触发事件进行优化。


防抖动

防抖动就是让用户在执行的动作停止后的x秒执行;
原理:将函数放到未来的某个时间点去执行
在到达这个时间点之前,如果这个函数被调用了,那么将刷新这个时间点

function debounce(func,wait){
            var timeout = null;
            return function(){
                //清除定时器
                clearTimeout(timeout);
                var _this = this;
                var args = arguments;
                //若干秒后执行这个方法
                timeout = setTimeout(function(){
                    func.apply(_this,args);
                },wait);
            }
}


节流

在某个特定的时间点内只会执行一次
button按钮在点击后的三秒内将不会再被响应
function throttle(func,wait){
            var time = false;
            return function(){
                if(time)return ;
                setTimeout(function(){
                    time = false;
                },wait);
                time  = true;
                return func.apply(this,arguments);                    
            }            

---------------------
作者:qq2682828
来源:CSDN
原文:https://blog.csdn.net/qq2682828/article/details/79138607
游客


返回顶部

公众号

公众号