节流函数与页面滚动处理的一些方式

Posted 2023-05-05

参考技术A 节流函数是防止短时间内多次触发的一个处理函数
如：滚动事件，使用 addEventListener 方式添加监听器

为了使节流之后滚动更加的平滑， 我们可以使用 window.requestAnimationFrame() 来实现节流函数

在视窗中显示
当需要实现图片的懒加载或者是无限滚动时，需要确定元素是否出现在视窗中， 这样需要获取 elem.getBoundingClientRect();

注意： 每次调用 getBoundingClientRect 时都会触发回流， 这样会严重的影响性能，特别是在事件处理函数中，会更加的严重影响性能；

在 2016 年之后， 可以通过 Intersection Observer 这个 api 来解决问题， 它允许你追踪目标元素与其祖先元素或者视窗的交叉状态， 另外只有一部分元素出现在视窗中，哪怕只有 1 px ， 也可以选择触发回调函数

滚动边界的问题：
当用户滚到末尾时， 整个页面都会开始滚动；
连锁滚动的表现， 当滚动有；元素到达底部时，可以改变页面的 overflow 属性或者在滚动元素的滚动事件处理函数中取消默认行为来解决这个问题

如果使用 javascript 处理， 那么处理的不是 scroll 事件， 而是每当用户使用鼠标滚轮 或者 是触摸板时 触发的是 wheel 事件

过度滚动对移动端的影响尤为的严重，下拉刷新的手势在 安卓的chrome 浏览器中，问题出现了，它会刷新整个页面， 而不是加载更多的内容；这个就会产生很多问题；

css 通过 overscroll-behavior 这个新属性解决问题。它通过控制元素滚动到尽头时的行为来解决 下拉刷新与 连锁滚动带来的问题。安卓的 glow 与苹果中的 rubber band。

准确的说， IE 与 Edge 实现了独有的 -ms-scroll-chaining 属性来控制连锁滚动；
微软浏览器已经准备实现 overscroll-behavior 这个属性

在触屏设备上，滚动的体验是一个很大的话题。

苹果公司开发了 惯性 滚动的专利；

css 有一个很hack 的方法；

只支持 webkit 内核，

但是我们会使用 touch 事件来解决这个问题，但是这个会对用户滚动体验造成很大的影响；
在现代的浏览器中，虽然知道如何使滚动变得平滑，但为了 确定滚动事件处理函数中是否执行了 阻止默认事件 ；可能任会花费 500 mm 来等待事件处理函数执行完毕

即使是一个空的事件监听函数， 从不取消任何行为，鉴于浏览器会期待 preventDefault 的调用， 也会对性能造成影响

为了告诉浏览器不去检测事件是否阻止了默认事件，在 whatwg dom 标准中，存在一个特性，来解决这个事件，

这个视频会看到带来的性能提升： https://www.youtube.com/watch?v=NPM6172J22g

此文借鉴： http://caibaojian.com/css-scroll.html

深入理解JS防抖与节流

日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）

函数防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

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, 1000));

如上所见，当持续触发scroll函数，handle函数只会在1秒时间内执行一次，在滚动过程中并没有持续执行，有效减少了性能的损耗

函数节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器
例如

var throttle = function(func, delay) 
    var prev = Date.now();
    return function() 
        var context = this;   //this指向window
        var args = arguments;
        var now = Date.now();
        if (now - prev >= delay) 
            func.apply(context, args);
            prev = Date.now();
        
    

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

window.addEventListener(‘scroll‘, throttle(handle, 1000));

这个节流函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的
再举一个定时器的例子：

var throttle = function(func, delay) 
    var timer = null;
    return function() 
        var context = this;
        var args = arguments;
        if (!timer) 
            timer = setTimeout(function() 
                func.apply(context, args);
                timer = null;
            , delay);
        
    

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

window.addEventListener(‘scroll‘, throttle(handle, 1000));

当触发事件的时候，我们设置了一个定时器，在没到1000ms之前这个定时器为null，而到了规定时间执行这个函数并再次把定时器清除。也就是说当第一次触发事件，到达规定时间再执行这个函数，执行之后马上清除定时器，开始新的循环，那么我们看到的效果就是，滚动之后没有马上打印，而是等待1000ms打印，有一个延迟的效果，并且这段时间滚动事件不会执行函数。
单用时间戳或者定时器都有缺陷，我们更希望第一次触发马上执行函数，最后一次触发也可以执行一次事件处理函数

var throttle = function(func, delay) 
     var timer = null;
     var startTime = Date.now();  //设置开始时间
     return function() 
             var curTime = Date.now();
             var remaining = delay - (curTime - startTime);  //剩余时间
             var context = this;
             var args = arguments;
             clearTimeout(timer);
              if (remaining <= 0)       // 第一次触发立即执行
                    func.apply(context, args);
                    startTime = Date.now();
               else 
                    timer = setTimeout(func, remaining);   //取消当前计数器并计算新的remaining
              
      

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

 window.addEventListener(‘scroll‘, throttle(handle, 1000));

在节流函数内部使用开始时间startTime、当前时间curTime和剩余时间remaining，当剩余时间小于等于0意味着执行处理函数，这样保证第一次就能立即执行函数并且每隔delay时间执行一次；如果还没到时间，就会在remaining之后触发，保证最后一次触发事件也能执行函数，如果在remaining时间内又触发了滚动事件，那么会取消当前的计数器并计算出新的remaing时间。通过时间戳和定时器的方法，我们实现了第一次立即执行，最后一次也执行，规定时间间隔执行的效果，可以灵活运用在开发中
PS：防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象，应该熟练掌握。最后再次感谢原作者的总结，热心分享技术让我们的生活变得更好