在我们实际做项目的过程中,有时需要在拉伸页面时调节弹框位置,这就需要调用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