码迷,mamicode.com
首页 > 其他好文 > 详细

简单的节流函数throttle

时间:2018-11-06 15:42:44      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:高阶函数   定时   console   window   interval   time   rgs   ott   use   

在实际项目中,总会遇到一些函数频繁调用的情况,比如window.resize,mouseover,上传进度类似的触发频率比较高的函数,造成很大的性能损耗,这里可以使用节流函数来进行性能优化,主要是限制函数被频繁调用的解决方案: 

let throttle = function(fn,interval){
    let __self = fn,timer,firstTime = true;
    return function(){
        var args = arguments,__me = this;
        if(firstTime){
            __self.apply(__me,args);
            return firstTime = false;
        }
        if(timer){
            return false;
        }
        //先执行了一次,firstTime是false,然后500毫秒之后利用定时器再次执行。
        timer = setTimeout(function(){
            clearTimeout(timer);
            timer = null;
            __self.apply(__me,args);
        },interval||500)
    }
}

window.onresize = throttle(function(){
    console.log(1)
},500)

此函数可以触类旁通,throttle是个高阶函数,参数输入是个函数【该频繁调用的函数】以及触发时间,第一次触发有个只执行一次的方法,后面接着就是定时器触发函数。节流函数的本质就是利用定时器的延迟进行函数触发。

 

【完】

后来我才知道,他并不是我的花。只是我恰好途径了他的盛放。

简单的节流函数throttle

标签:高阶函数   定时   console   window   interval   time   rgs   ott   use   

原文地址:https://www.cnblogs.com/tangjiao/p/9915537.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!