scroll优化之防抖与节流

littleGrow 发布于2019-08-22 10:45 / 1005人阅读

摘要：这个优化方案是参照前端性能高性能滚动及页面渲染优化在这里简单的把两个方式写出来，以便快速了解。。

这个优化方案是参照【前端性能】高性能滚动 scroll 及页面渲染优化

在这里简单的把两个方式写出来，以便快速了解。。

第一种：防抖（也就是滚动结束才执行）

演示：

闭包：

/*
    延时执行
    @param fn function
    @param wait number
    @return function
*/
function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if(timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}
// 处理函数
function handle() {
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener("scroll", debounce(handle, 500));

直接写：

var timeout = null;
window.addEventListener("scroll", function() {
    if(timeout !== null) clearTimeout(timeout);
    timeout = setTimeout(function() {
        var scrollTop = this.scrollY;
        console.log(scrollTop);
    }.bind(this), 500);
});

第二个是节流（Throttling）滚动的过程中间隔执行，例如滚动加载图片效果，不可能等到滚动结束才执行加载函数数吧，所以这里可以做一个间隔执行。。

演示：

闭包：

/*
    节流函数
    @param fn function
    @param wait number
    @param maxTimeLong number
    @return function
*/
function throttling(fn, wait, maxTimelong) {
    var timeout = null,
        startTime = Date.parse(new Date);

    return function() {
        if(timeout !== null) clearTimeout(timeout);
        var curTime = Date.parse(new Date);
        if(curTime-startTime>=maxTimelong) {
            fn();
            startTime = curTime;
        } else {
            timeout = setTimeout(fn, wait);
        }
    }
}

function handle() {
    console.log(Math.random()); 
}

window.addEventListener("scroll", throttling(handle, 300, 1000));

直接写：

var timeout = null,
    startTime = Date.parse(new Date); // 开始时间

function handle() {
    console.log(Math.random()); 
}

window.addEventListener("scroll", function() {
    if(timeout !== null) clearTimeout(timeout);
    var curTime = Date.parse(new Date); // 当前时间
    if(curTime-startTime>=1000) { // 时间差>=1秒直接执行
        handle();
        startTime = curTime;
    } else { // 否则延时执行，像滚动了一下，差值<1秒的那种也要执行
        timeout = setTimeout(handle, 300);
    }
});

诸如此类事件的还有resize事件都可以使用这两种方式,当然使用哪一种，还要看项目需求了。。谢谢关注~

云服务器 GPU云服务器 VUE防抖与节流防抖 VUE防抖 scrolling

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

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

JS系列之防抖节流

摘要：概念函数节流和函数防抖，两者都是优化高频率执行代码的一种手段。函数节流与函数防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。节流指定时间间隔内，只会执行最后一次任务。概念函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次...

everfight 2019-08-23 14:40 评论0 收藏0
[译]通过实例讲解Debouncing和Throtting(防抖与节流)

摘要：译通过实例讲解和防抖与节流源码中推荐的文章，为了学习英语，翻译了一下原文链接作者本文来自一位伦敦前端工程师的技术投稿。首次或立即你可能发现防抖事件在等待触发事件执行，直到事件都结束后它才执行。 [译]通过实例讲解Debouncing和Throtting(防抖与节流) lodash源码中推荐的文章，为了学习（英语），翻译了一下~ 原文链接作者：DAVID CORBACHO 本文来自一位...

Jenny_Tong 2019-08-23 13:42 评论0 收藏0
前端进击的巨人（八）：浅谈函数防抖与节流

摘要：隆重请出主角防抖与节流。防抖与节流的异同相同都是防止某一时间段内，函数被频繁调用执行，通过时间频率控制，减少回调函数执行次数，来实现相关性能优化。参考文章分钟理解的节流防抖及使用场景函数防抖和节流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还...

_Zhao 2019-08-23 15:37 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

leoperfect 2019-08-23 13:53 评论0 收藏0
小菊花课堂之JS的防抖与节流

摘要：文章来源详谈防抖和节流轻松理解函数节流和函数防抖函数防抖和节流好啦，今天的小菊花课堂之的防抖与节流的内容就告一段落啦，感各位能耐心看到这里。前言陆游有一首《冬夜读书示子聿》——古人学问无遗力，少壮工夫老始成。纸上得来终觉浅，绝知此事要躬行。，其中的意思想必大家都能明白，在学习或工作中，不断的印证着这首诗的内涵。所以，又有了此篇小菊花文章。详解在前端开发中，我们经常会碰到一些会持...

Yangder 2019-08-02 12:10 评论0 收藏0