js节流操作

函数节流，之前在用一些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

posted @ 2015-05-28 10:13  独孤残情  阅读(306)  评论(0)    收藏  举报