改变浏览器窗口页面元素大小需要使用window的resize事件，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Throttle</title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
window.οnresize=resizehandler;
</script>
</body>
</html>
简单的一个拖拽让resizeHandler()方法执行了多次，这时候使用节流来处理一个函数连续执行多次的问题
第一种节流：
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}
利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复。刚才的代码可以改为：
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}
window.οnresize=function(){
throttle(resizehandler,window);
};
</script>
第二种节流：
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
上面的方法加入进来后，代码如下：
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
window.οnresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>
两者的比较：
两种方法都是利用了setTimeout，不同的是第二种方法加入的函数延迟执行时间，这个在第一种方案中很容易也具有此功能。
但第一种方案把tId设为函数的一个变量保存，而第二种创建了一个闭包来存储，意味着第二种可以传入多个参数。
转载地址：http://www.cnblogs.com/dolphinX/p/3403821.html
扫一扫
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
