函数节流简要解析

在我们实际做项目的过程中,有时需要在拉伸页面时调节弹框位置,这就需要调用window.resize函数,但这也会引发一个问题,

那就是在极短的时间内,resize内的函数会被执行许多次,造成内存的大量使用甚至浏览器崩溃,同理,在调用mousemove时也会这样。

为此,在js红宝书内提出了函数节流的概念:

function throttle(method,context){
            clearTimeout(method.tId);
            method.tId=setTimeout(function(){
                method.call(context);
            },500);
        }

具体解决思路如下:

1.定义执行函数与执行控制函数;

2.执行控制函数内设置定时器,将执行函数推迟500ms执行,并在每次进入执行控制函数时清除控制器,这样保证执行函数实际上只执行一次

3.resize内调用控制执行函数。

function handle(){
    console.log('1')
}
function handleCtrl(){
    clearTimeout(handleCtrl.st)
    handleCtrl.st= setTimeout(function(){
        handle()
    }, 500)
}
window.onresize= function(){
    handleCtrl()
}

其实对于函数节流还有多种方式,但这种方式最为高效简洁,其他不做赘述,

详情可参考: http://www.cnblogs.com/dolphinX/p/3403821.html

原文地址:https://www.cnblogs.com/yanze/p/7500386.html