节流函数怎么写？

twohappy 发布于2019-08-22 16:29 / 2968人阅读

摘要：真正的节流应该是在可接受的范围内尽量延长这个调用时间，也就是我们自己控制这个执行频率，让函数减少调用以达到减少计算提升性能的目的。

平时我们在开发中，会经常使用到resize和movesemove事件，这些事件会在短时间内频繁的执行事件绑定程序，我们知道频繁的操作DOM会带来很大的性能消耗，页面会促发回流和重绘。有时候页面会出现卡顿，在IE浏览器下可能直接崩溃。这时候节流函数就发挥作用了。

什么是函数节流？

简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。或者说你在操作的时候不会马上执行该函数，而是等你不操作的时候才会执行。

函数截流的原理

通过使用定时器，在操作的时候让函数延时执行，如果在这个时间内还在操作，则清除原来的定时器，再创建一个新的定时器执行

方式一：

最简单的操作方式，在操作的的时候清除上次的定时器，不操作的事后在执行callBack回调

//封装
／**
*  @  { Function} callBack    回调程序    
*／
function throttleFn(callBack){
    clearTimeout(method.timer);
    method.timer=setTimeout(()=>{
        method()
    },100)
}

//调用
window.onresize=function(){
    throttleFn(callBack)
}

方式二

优势在于把延迟时间当做变量，而且使用闭包保护私有变量，缺点就是虽然使用apply把调用throttleFn时的this上下文传给执行函数，但毕竟不够灵活

//封装
／**
*  @  { Function} callBack    回调程序    
*  @  { Number } delay  延时时间
*  return  { Function }
*／
function thorttleFn(callBack,delay){
    var timer=null;
    return function(){
        var context=this;
        clearTimeout(timer);
        timer=setTimeout(()=>{
            callBack.apply(context,arguments)
        },delay)
    }
}

//调用
window.onresize=thorttleFn(myFunc,300)

方式三(个人认为性能最优)

拓展深化函数节流

其实函数节流的出发点，就是让一个函数不要执行得太频繁，减少一些过快的调用来节流，减少性能消耗。当你在操作resize和mousemove事件的时候，浏览器其实是有设置一个时间间隔，这个时间是多少我们不清楚，而且他们没有提供参数去设置，所以需要我们在他们的基础上再去做一些改变。真正的节流应该是在可接受的范围内尽量延长这个调用时间，也就是我们自己控制这个执行频率，让函数减少调用以达到减少计算、提升性能的目的。假如原来是16ms执行一次，我们如果发现resize时每50ms一次也可以接受，那肯定用50ms做时间间隔好一点。

／**
*  @  { Function} callBack 回调程序    
*  @  { Number } delay  延时时间
*  @  { Number }  intervalTime  间隔时间
*  return  { Function }
*／
function thorttleFn(callBack,delay,intervalTime){
    var timer=null;  // 定时器变量
    var time=0;  // 时间变量
    return function(){
        var context=this;
        var curTime=new Date();  // 当前执行的时间
        clearTimeout(timer);  //  清除上次的定时器
        
        if(!time){
            time=curTime;
        }
        // 当前执行时间距离上次执行的时间是否大于等于间隔时间
        if(curTime - time >= intervalTime){
            time=curTime;
            callBack.apply(context,arguments)
        }else{
            timer=setTimeout(()=>{
                callBack.apply(context,arguments)
            },delay)
        }
    }
}

//调用
window.onresize=thorttleFn(myFunc,50,300)

GPU云服务器云服务器函数节流 js函数节流 php写回调函数汇编写c语言函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94401.html

JavaScript中函数节流的理解

摘要：每次鼠标移动都是这样的处理过程，直到鼠标不再移动一秒钟后，定时器中的函数才被使用。函数节流的原理函数节流，就是对会频繁触发的函数事件做一些限制，让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发。一般我们会给他起一个名字throttle。也就是节流的意思。一般这样的函数有 resize事件、ontouchmove事件等。举个简单的例子测试函数节...

taohonghui 2019-08-19 17:56 评论0 收藏0
JS进阶篇--JS函数节流（throttle）

摘要：函数节流的原理函数节流的原理挺简单的，估计大家都想到了，那就是定时器。在高级程序设计一书有介绍函数节流，里面封装了这样一个函数节流函数，它把定时器存为函数的一个属性个人的世界观不喜欢这种写法。什么是函数节流？介绍前，先说下背景。在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（其核心就是绑定mousemove），这种事件有一个特点，就是用户不必特地捣乱...

cpupro 2019-08-20 16:41 评论0 收藏0
js中函数节流&函数去抖

摘要：节流保证在一定时间内，只能触发一次。我们在尝试一下去抖消抖，消除抖动，感觉这个更好听有没有什么现成的上的一次发现源码的经历以及对学术界拿来主义的思考函数节流和函数去抖应用场景辨析函数去抖的实现开篇先提几个问题？ 1.做搜索框的时候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就触发？是滚一段距离触发一次？还是滚一圈触发一次？还是滚...

王军 2019-08-22 10:42 评论0 收藏0
节流和防抖动

摘要：起因面试被问到了节流和防抖动自己对这两个的概念比较模糊都不知道回答了什么鬼从语文和英语学起首先先看字面意思节流的意思就是水龙头关小点频率不要那么高防抖动这根弹簧你不要来回蹦了我就要你最后停下来的没有发生形变的那一刻举个例子节流在改变窗口大小起因面试被问到了节流和防抖动, 自己对这两个的概念比较模糊, 都不知道回答了什么鬼从语文和英语学起首先, 先看字面意思:节流(throttl...

hellowoody 2019-08-22 15:41 评论0 收藏0