再谈给onScroll减压

原创 2015年11月17日 18:07:46

一直觉得setInterval给onscroll减压这个办法,定期去判断浏览器是否触发了滚动事件还是很挫的,近来在一个项目中突发奇想,让我找到了更好的方法。就是onscroll的时候,判断一下当前时间,详细看代码

var prevTime = + new Date;
window.onscroll = function() {
    var now = + new Date;
    //当前时间超过开始时间 200毫秒 则执行
    if ( now - prevTime > 200 ) {
        prevTime = now;
        scrollHandle();
    }
}



那我知道的方法有3个了


setTimeout

var timeout;
window.onscroll = function() {
    clearTimeout( timeout );
    timeout = setTimeout(function() {
        scrollHandle();
    }, 200);
}



setInterval

var changed = false;
window.onscroll = function() {
    changed = true;
}
setInterval( function() {
    if ( changed === true ) {
        scrollHandle();
        changed = false;
    }
} , 200);



time

var prevTime = + new Date;
window.onscroll = function() {
    var now = + new Date;
    //当前时间超过开始时间 200毫秒 则执行
    if ( now - prevTime > 200 ) {
        prevTime = now;
        scrollHandle();
    }
}



现在好好总结一下,也好好测试一下它们的效率。
我的想法是用chrome中的timeline,检测每个方法在一个5秒滚动事件中的性能损耗,由于人工操作不能保障滚动时长,所以写一个点击事件去启动一个setInterval不断改变滚动条。


测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn">test</button>
<div style="height:20000px;"></div>
<script>
var _window = window,
    _document = document,
    dElem = _document.documentElement,
    body = _document.body,
    interval,
    i = 0;

function getScrollTop() {
    return _window.pageYOffset 
                || 
                dElem.scrollTop 
                || 
                body.scrollTop
                ;
}
function test() {
    var now;
    if ( !interval ) {
        now = + new Date;
        interval = setInterval(function() {
            //5秒后停止
            if ( new Date - now > 5000 ) {
                clearInterval( interval );
                interval = null;
            } else {
                _window.scroll( 0, getScrollTop() + 5 );
            }
        }, 20);
    }   
}
function scrollHandle() {
    console.log( ++i );
}

_document.getElementById( 'btn' ).onclick = function() {
    test();
}


//setTimeout start
/*
var timeout;
_window.onscroll = function() {
    clearTimeout( timeout );
    timeout = setTimeout(function() {
        scrollHandle();
    }, 200);
}*/
//setTimeout end

//setInterval start
/*
var changed = false;
_window.onscroll = function() {
    changed = true;
}
setInterval( function() {
    if ( changed === true ) {
        scrollHandle();
        changed = false;
    }
} , 200);
*/
//setInterval end

//time start
var prevTime = + new Date;
_window.onscroll = function() {
    var now = + new Date;
    //当前时间超过开始时间 200毫秒 则执行
    if ( now - prevTime > 200 ) {
        prevTime = now;
        scrollHandle();
    }
}
//time end

</script>   
</body>
</html>



测试方法:
1. 打开chrome调试工具
2. 切换到timeline频道
3. timeline频道,点击“record”按钮
4. 页面中点击“test”按钮,触发滚动条动画
5. 动画停止后,timeline频道,再次点击“record”按钮,停止记录
6. 查看记录数据



测试结果:
setTimeout
这里写图片描述


setInterval
这里写图片描述


time
这里写图片描述


汇总
这里写图片描述


总结
setTimeout 是最慢的,原因也很简单,频繁setTimeout及clearTimeout,也由于这个原因,得等到滚动事件停止才能执行回调。setInterval性能不错,但对比time方法,它的定期检查机制显得太浪费了。

给onScroll减减压

现在很多功能都需要监听onscroll事件完成的,然而onscroll触发得很频繁也是众所周知。 测试一下(请先让浏览器出现滚动条)var no = 0; /** * 统计触发次数 */ fun...
  • zakkye
  • zakkye
  • 2015年05月29日 18:06
  • 431

程序员篇----你是如何减压的? 分享几个程序员减压网站~

上班打代码,下班还在打代码,每天被代码折磨的疲惫不堪的程序员们终于可以趁着中秋小假期放松一下了。但是,小编相信可能依然还有部分猿猿们奋战在电脑前线,今天小编为大家奉上几个超赞的良心网站,帮助猿猿们减压...
  • zz2043191420
  • zz2043191420
  • 2014年09月10日 10:25
  • 1168

职场人士如何减压-有效减压六大方法

有效减压的六大方法 面对压力(想办法解决问题,而不是逃避) 正确认知(正确认知负面情感的产生) 分散注意(健身、听音乐、跑步) 合理安排时间(比如开会时间长) 健康方式宣泄(大笑或者叫喊、哭泣、运动、...
  • k_scott
  • k_scott
  • 2016年09月20日 17:26
  • 343

服务器减压

你架了高防,用了缓存,写了软防。。但还是有人盯着你怎么办。这时候,新闻系统出问题了,所以业务挂了;业务系统被攻击了,然后新闻系统也无法访问了,后台也不能访问了。这时候,把数据库单独放到一个服务器上,w...
  • u012900128
  • u012900128
  • 2016年09月03日 16:48
  • 300

js中的onscroll的用法

onscroll是在元素轴滚动时触发的。 eg:如是在div滚动条滚动时触发的。 eg:window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的。 利用ons...
  • kbx8916
  • kbx8916
  • 2016年11月15日 20:40
  • 4594

JavaScript之onscroll事件

onscroll事件 •是页面滚动条滚动事件,当页面滚动条滚动时候,自动触发 •如果页面没有滚动条或者没有发生滚动操作,则不会执行onscroll事件 •从属于window对象,事件应绑定到wi...
  • arvin_top
  • arvin_top
  • 2017年04月15日 11:56
  • 259

ScrollView 组件原生事件onScroll

ScrollView 组件 onScroll 事件
  • DeepLies
  • DeepLies
  • 2017年04月11日 15:57
  • 1584

GestureDetector.SimpleOnGestureListener onScroll参数问题

问题描述: public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)是Gest...
  • AuthorK
  • AuthorK
  • 2016年12月12日 20:11
  • 1741

推荐给大家减压神曲 -- 国内神曲

推荐给大家减压神曲 – 国内神曲神曲库链接欢迎加入网易云音乐, 加好友Zszen...
  • zszeng
  • zszeng
  • 2016年01月19日 21:49
  • 459

GestureDetector中onFling()与onScroll()的区别

在手势检测中,onFling()与onScroll()有点类似,一个为“滑动”,一个为“拖动”。都是手指在屏幕(或某一组件)上移动一段距离后触发。      然而二者毕竟是有区别的:(下面结论是...
  • LAMP_zy
  • LAMP_zy
  • 2016年08月31日 18:39
  • 1495
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:再谈给onScroll减压
举报原因:
原因补充:

(最多只允许输入30个字)