码迷,mamicode.com
首页 > Web开发 > 详细

js节流操作

时间:2015-05-28 12:42:28      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

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

js节流操作

标签:

原文地址:http://blog.csdn.net/u011551941/article/details/46118805

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!