优化移动端window.onscroll的执行频率方案

3fuyu 发布于2019-08-29 14:00 / 2759人阅读

摘要：脑洞爆炸的背景最近开发项目动效开发越来越多部分动效需要在页面滑动的时候执行一定的效果但是发现在移动端很多时候页面滑动的速度快的时候，动效呈现的不稳定性越明显，会不流畅虽然使用的过渡可以从视觉层面解决这个问题，但是并不能根治，于是乎想到了一个

脑洞爆炸的背景

最近开发项目动效开发越来越多；
部分动效需要在页面滑动的时候执行一定的效果；
但是发现在移动端很多时候页面滑动的速度快的时候，动效呈现的不稳定性越明显，会不流畅；虽然使用css3的过渡可以从视觉层面解决这个问题，但是并不能根治，于是乎想到了一个方案。。。

requestAnimationFrame（RAF）

h5新增的用于刷帧的api ，大家可以网上找到很多相关教程，用法及其简单，跟使用setTimeOut一样；此api的初衷本人理解为用于更好的执行动画，而找到的一句话 “执行渲染下一帧之前的动作”可能更好的帮助你理解这个api；

方案

而之前说的移动端动画不流畅的原因是因为快速滑动的时候，两次出发scroll之间的“间距”越来越大，而导致需要根据滑动计算的精度越来越不准，我们当然希望每滑动1px执行一次scroll是最完美的啦～（虽然基本不可能）

于是乎，想到了一个方案?！

可以在window.scroll开始的时候开启RAF,在window.scroll结束的时候关闭RAF ，所有需要执行在scroll中的函数搬到RAF中执行就好了

事实上实验结果是成功的

每次window.scroll的时候在页面插入一次scroll字样，每次raf执行的时候插入raf字样，在保证一段scroll过程中只存在唯一一个RAF ，输出如上图

事实证明 ios微信环境下， raf触发的频率在快速滑动页面的时候确实高于scroll；

实现

唯一的一个实现难点在于 scrollend如何监听

在每一次scroll的时候，开启一个50ms的定时器，定时器认定为scroll结束，但是每次滑动都创建定时器就乱套了，所以要在创建定时器之前先清除定时器；

捋一下：

第一次scroll，清除一个不存在的定时器，然后创建定时器， 50ms之后执行的就是scroll结束

第二次scroll ，清除第一次创建的定时器，创建一个定时器， 50ms之后执行的就是scroll结束

。。。。

最后一次scroll ，清除倒数第二次创建的定时器，创建一个定时器，由于没有下一次scroll了，那么这个定时器就真的是最后一次scroll了

于是通过这样的方案迂回形成了scrollEnd ，虽然有50ms的误差～

然后代码如下：

var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };

var cancelRAF = window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout;


class BetterScroll {
constructor() {
    let sy = window.scrollY;
    this.onScroll = this.onScroll;
    this.onScrollEnd = this.onScrollEnd;
    this.scrollList = [];
    this.scrollEndList = [];
    this.scrollTimer = null;
    this.nowWsy = sy;
    this.lastY  =  sy;
    this.direction = 0;
    this.rafMark = null;
    this.rafingMark = false;
    this.gap = 0;
    this.bindEvent();
}
onScroll(cb) {
    if (typeof cb !== "function") {
        return;
    }
    this.scrollList.push(cb);
}
onScrollEnd(cb) {
    if (typeof cb !== "function") {
        return;
    }
    this.scrollEndList.push(cb);
}
scrollEnd() {
    let winInfo = {
        sy : this.nowWsy,
        gap : Math.abs(this.gap),
        dir : this.direction,
    }
    for (let i = 0, len = this.scrollEndList.length; i < len; i++) {
        try {
            this.scrollEndList[i](winInfo);
        } catch (error) {
            console.warn(error)
        }
    }
}
rafing() {
    this.nowWsy = window.scrollY;
    this.gap = this.nowWsy - this.lastY;
    // 1为向上滑动 -1 为向下滑动
    !!this.gap && (this.direction = (((this.gap >= 0) | 0 ) - 0.5) * 2);
    this.lastY = this.nowWsy;
    let winInfo = {
        sy : this.nowWsy, //当前window的scrollY
        gap : Math.abs(this.gap), //上次到这次滑动的距离
        dir : this.direction,  ／／ 滑动方向
        
    }
    for (let i = 0, len = this.scrollList.length; i < len; i++) {
        try {
            this.scrollList[i](winInfo);
        } catch (error) {
            console.warn(error)
        }
    }

    this.startRaf();
}
startRaf() {
    let _this = this;
    this.rafMark = rAF(function () {
        _this.rafing();
    })
}
bindEvent() {
    let _this = this;
    window.addEventListener("scroll", function () {
        clearTimeout(_this.scrollTimer);

        if (!_this.rafingMark) {
            _this.startRaf();
            _this.rafingMark = true;
        }

        _this.scrollTimer = setTimeout(function () {
            cancelRAF(_this.rafMark);
            _this.scrollEnd();
            _this.rafingMark = false;
        }, 50);

    }, 0)
}
}

let btScroll = new BetterScroll();

export default btScroll;

用法：

组建抛出btScroll对象 ，

提供两个方法

btScroll.onScroll(callback);  window正在scrolling的函数 ， 回调函数接受参数 winInfo

btScroll.onScrollEnd(callback); window滑动结束的函数 ， 回调函数接受参数 winInfo


winInfo  ：  {
    sy : window的scrollY值,
    gap : 上一次scroll到这一次scroll之间的差值绝对值,
    dir : window的滑动方向 1为浏览器滚动条向下滚动 ， -1为浏览器滚动条向上滚动,
}

欢迎各位大大交流，有更好的脑洞和哪里写的不足的地方欢迎留言讨论！

idc机房托管混合云 webrtc移动端传输优化移动端适配方案兼容支持webrtc的移动端移动端对webRTC的支持情况

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112852.html

优化移动端window.onscroll的执行频率方案

摘要：脑洞爆炸的背景最近开发项目动效开发越来越多部分动效需要在页面滑动的时候执行一定的效果但是发现在移动端很多时候页面滑动的速度快的时候，动效呈现的不稳定性越明显，会不流畅虽然使用的过渡可以从视觉层面解决这个问题，但是并不能根治，于是乎想到了一个脑洞爆炸的背景最近开发项目动效开发越来越多；部分动效需要在页面滑动的时候执行一定的效果；但是发现在移动端很多时候页面滑动的速度快的时候，...

Simon 2019-08-02 15:59 评论0 收藏0
优化移动端window.onscroll的执行频率方案

摘要：脑洞爆炸的背景最近开发项目动效开发越来越多部分动效需要在页面滑动的时候执行一定的效果但是发现在移动端很多时候页面滑动的速度快的时候，动效呈现的不稳定性越明显，会不流畅虽然使用的过渡可以从视觉层面解决这个问题，但是并不能根治，于是乎想到了一个脑洞爆炸的背景最近开发项目动效开发越来越多；部分动效需要在页面滑动的时候执行一定的效果；但是发现在移动端很多时候页面滑动的速度快的时候，...

sarva 2019-08-05 12:34 评论0 收藏0
优化移动端window.onscroll的执行频率方案

摘要：脑洞爆炸的背景最近开发项目动效开发越来越多部分动效需要在页面滑动的时候执行一定的效果但是发现在移动端很多时候页面滑动的速度快的时候，动效呈现的不稳定性越明显，会不流畅虽然使用的过渡可以从视觉层面解决这个问题，但是并不能根治，于是乎想到了一个脑洞爆炸的背景最近开发项目动效开发越来越多；部分动效需要在页面滑动的时候执行一定的效果；但是发现在移动端很多时候页面滑动的速度快的时候，...

lewif 2019-08-21 17:59 评论0 收藏0
浅谈js防抖和节流

摘要：防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。（信我，你看完肯定就懂了）从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。showImg(ht...

opengps 2019-08-26 13:32 评论0 收藏0
H5下拉刷新和上拉加载实现原理浅析

摘要：原文链接前言在移动端网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如，库等。原文链接：justrockit.top 前言在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。实现原理下拉刷新...

X1nFLY 2019-08-22 16:23 评论0 收藏0