函数节流，之前在用一些onscroll,onresize这种容易频繁触发的事件。都没有做节流，可以说缺乏这个意识，突然在群里看到有朋友提问，我自己也想到了。确实要处理，不能狗频繁触发。频繁触发的话，浏览器的负载会越来越大的。比如scroll每滚动一下，浏览器就会处理里面的逻辑。如果我们每隔一段时间在处理逻辑。这样浏览器就不会有这么大的负载了。对不。
两个逻辑。延迟定时器。和时间戳。
resize我们应该每次改变窗口大小之后，在处理逻辑。这样优化，其他的逻辑应该每隔一定的频率就行处理逻辑。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body style="height:2000px;">
</body>
<script>
var last = 0;
var timer;
window.onscroll=function(ev){
throttle(1000,function(ev){
alert("1111");
},ev.type)();
}
var throttle = function(delay, action,type){
return (type=="resize")?function(){
clearTimeout(timer);
timer=setTimeout(function(){
action.apply(this, arguments);
},delay)
}:function(){
var curr = +new Date();
if (curr - last > delay){
action.apply(this, arguments);
}
last = curr;
}
}
</script>
</html>
演示地址:http://sandbox.runjs.cn/show/3kntsvtf
时间： 2024-10-27 03:18:39