函数除颤/节流提高性能 + 原生实现滚动时到视口时展现

摘要：引言前端开发中一个老生常谈的问题就是当用户滚动时根据滚动的位置适当触发不同的函数动画例如当元素出现在视口时触发该元素的改变通常的做法就是在上附加事件但是我们知道当滚动条滚动时事件触发的是很频繁的且不由控制浏览器的事件队列原生提供如图添加事件

前端开发中一个老生常谈的问题就是"当用户滚动时, 根据滚动的位置适当触发不同的函数/动画, 例如当元素出现在视口时触发该元素的style改变. 通常的做法就是在scrollElement上附加scoll事件. 但是我们知道, 当滚动条滚动时scroll事件触发的是很频繁的, 且不由JS控制(浏览器的事件队列原生提供), 如图(添加事件监听后滚轮三格):

依据系统设置的不同, 一次滚轮触发的scroll事件大概在10~15次之间. 如果在回调函数中添加大量的DOM操作或者计算的话, 会引起明显的卡顿等性能问题. 那有没有办法去稀释回调函数的触发操作呢? 这个时候就需要函数节流(throttle)和debounce(去颤抖)来解决了!

这个版本运用闭包封装数据, 修正this指向以加强鲁棒性, 剔除了一开始就显示在视口的元素
talk is cheap, here are the code

// 根据单一元素, throttle函数专门负责事件稀释, 接受两个参数: 要间隔调用的函数, 以及调用间隔. 
var throttle = function (fn, interval) {
  let start = Date.now()
  let first = true
  return function (...args) {
    let now = Date.now()
    // 如果是第一次调用, 则忽略时间间隔
    if (first) {
      fn.apply(this, args)
      first = false
      return
    }
    if (now - start > interval) {
      fn.apply(this, args)
      start = now
    }   
  }
}
// 显示元素的IIFE
var showElems = (function (selector, func) {
  // 预处理, 标识已经显示在视口的元素
  let elemCollect = [...document.querySelectorAll(selector)]
  let innerHeight = window.innerHeight
  let hiddenElems = []
  elemCollect.forEach((elem, index) => {
    let top = elem.getBoundingClientRect().top
    // 不显示在视口才加入判断队列
    if (top > innerHeight) {
      hiddenElems.push(elem)
    }
  })
  // memory release
  elemCollect = null
  return function (...args) {
    hiddenElems.forEach((elem) => {
      let bottom = elem.getBoundingClientRect().bottom
      if (bottom < innerHeight) {
        func.apply(elem, args)
      }
    })
  }
})("p", function(e){
  console.log(this, e, "showed!")
})
// 组合, throttle函数负责稀释showElems触发的频率, showElems负责元素滚动到视口时的相应动作
var throttledScroll = throttle(showElems, 500)
window.addEventListener("scroll", throttledScroll)

设想一些用户的频繁操作, 例如滚动, 文本框输入等, 每次触发事件都要调用回调函数; 这样做的代价未免大了点. 而debounce的作用就是在在用户高频触发事件时, 暂时不调用回调, 在用户停止高频操作(例如停止输入, 停止滚动时), 再调用一次回调.

解决方案有了, 怎样用代码实现呢? 这里我们要用到setTimeout这个功能来做函数调用的延迟. 具体代码如下(将代码粘贴到console中执行以下, 自己试试看):

            var timer;
            document.addEventListener("scroll", function(){
                clearTimeout(timer); //如果操作时已经有了延迟执行, 则取消该延迟执行
                timer = setTimeout(function() { //设定新的延迟执行
                    callback();
                }, 500)
            })

(这里我们为了方便说明, 设定了timer全局变量. 实践中我们可以将timer附加为函数的属性, 隐藏在闭包中, 或者作为对象的属性等. )

当第一次高频操作触发时, 设定一个timer, 在500ms后执行; 如果用户在500ms之内没有再次进行该操作(本例中是滚动), 那么我们调用callback; 然而如果500ms之内用户又触发了滚动(即所谓的高频操作), 那么我们清除上一次设定的timeout, 设定一个新的, 500ms之后执行的timeout.

大家思考一下, debounce的本质就是在用户触发expensive操作时, 不断延期该expensive操作的执行时间(取消和设定timeout的代价是很小的). 当用户停止操作, 那我们就不再延期, 最后一次设定的timeout会在500ms后执行expensive operation, 例如dom操作, 计算等.

到这里我们似乎已经有了一个解决方案! 然而还有个小小的问题.....

如果用户不停地操作, 那debounce就会不断把操作延期, 如果用户没有两次操作的间隔时间大于500ms, 那么我们的callback永远也得不到执行. 可怜的callback! 恩, 在这一点上我们当然可以改进...

throttle的作用是, 保证一个函数至少间隔一段时间得到一次执行. 不像等待用户停止的debounce, throttle即使在用户不停操作时, 也能让callback在操作期间得到间隔的执行.

那么该怎么做呢? 一种方法是在用户开始操作时记录开始时间, 同时设定一个flag ifOperationBegin = true. 之后在每次用户的操作中判断当前时间, 如果当前时间-开始时间 > 某个值, 比如500ms, 则执行callback, 同时设定ifOperationBegin = true, 以开始下一次的设定开始时间 -> 记录操作时间 -> 判断的循环. 具体到代码实现上:

            var scrollBegin = false, scrollStartTime = null; //用户尚未开始操作
            document.addEventListener("scroll", function(){
                if(!scrollBegin)scrollStartTime = Date.now();//记录开始时间, 前提是callback还没有被触发过
                scrollBegin = true;//设定flag
                if(Date.now() - scrollStartTime > 500){ //如果操作时间和开始时间间隔大于500ms则
                    exec(elems, cb); //调用回调
                    scrollBegin = false; //flag设为false, 以设定新的开始时间
                }
            })

这样做的效果是, 在用户持续触发scroll操作时, 保证在用户操作期间callback至少会每隔500ms触发一次. 如果用户操作在500ms之内结束, 那也木有关系, 下一次用户重新开始操作时我们的scrollStartTime 依然保留着, callback会被立即触发.

那这两种技术可以运用到哪里呢? 请看如下代码栗子:

        function detectVisible(selector, cb, interval){ //检测元素是否在视口的函数
            var elems = document.querySelectorAll(selector), innerHeight = window.innerHeight;
            var exec = function(elems, cb){ //回调函数
                Array.prototype.forEach.call(elems, function(elem, index){
                    if(elem.getBoundingClientRect().top < innerHeight){ //判断元素是否出现在视口
                        cb.call(elem, elem); //调用传入的回调
                    }
                })
            }
            document.addEventListener("scroll", function(){ //使用debounce和throttle来稀释scroll事件
                clearTimeout(detectVisible.timer);
                if(!detectVisible.scrollBegin)detectVisible.scrollStartTime = Date.now();
                detectVisible.scrollBegin = true;
                if(Date.now() - detectVisible.scrollStartTime > interval){
                    exec(elems, cb);
                    console.log("invoked by throttle!")
                    detectVisible.scrollBegin = false;
                }
                detectVisible.timer = setTimeout(function() {
                    exec(elems, cb);
                    console.log("invoked by debounce!")
                }, interval)
            })
        }
        detectVisible("div.elem", function(elem){
            this.style.backgroundColor = "yellow";
        }, 500);

这个栗子中我们综合运用了throttle和debounce, 达到了如下效果: 用户不停滚动时callback会至少每500ms触发一次; 用户停止滚动后的500ms判断函数也会触发一次. 大家可以打开console查看callback何时是被throttle触发的, 何时是被debounce触发的.

这一篇文章的主要主题事件的稀释以期性能上的改善, 有两种解决方法:throttle和debounce. 前者是通过在用户操作时判断操作时间, 来达到间隔一段时间触发回调的效果; 而后者则是将触发的时间不断延期, 直到用户停止操作再执行回调. 两者各有优缺点, 两相结合, 我们得到了一个用户无论怎样操作(不停操作或者操作时间极短)都可以保证callback定期得到执行的函数. problem solved!

看完这篇, 如果你有所收获, 请去github给我加个star呗!~