【性能优化】防抖节流

工作中遇到的频率相当高，处理不当就会引起浏览器卡死，后台一直在执行代码。

防抖（debounce）

给定的时间内继续触发事件就会清除定时器然后重新开始计时，直到你在这个时间段内不再触发事件，才会执行func函数。

• 如果在1s内没有再次触发事件，那么就执行函数

• 如果在1s内再次触发事件，那么当前的计时取消，重新开始计时

举例：页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）

const debounce = (func, wait = 1000) => {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;

    if(timeout) {
        clearTimeout(timeout);
    }

    let later = () => {
        timeout = null;
        func.apply(context, args);
    };

    timeout = setTimeout(later, wait);
  }
}

含义：对于短时间内连续触发的事件，防抖的含义就是让某个时间期限内，事件处理函数只执行一次。

插件：debounce.js是lodash工具库中的一个非常好用的函数。

节流（thorttle）

一个函数只有在大于等于执行周期时才执行，周期内调用不执行。 n 秒内只会执行一次，稀释函数的执行频率。

举例：频繁触发接口会一直报429，所以2000毫秒内只能调用一次。

const throttle = (fn, wait = 2000) => {
    var prev = Date.now();
    return function () {
        var context = this;
        var args = arguments;
        var now = Date.now();
        console.log(now - prev > wait)
        if (now - prev > wait) {
            fn.apply(context, args)
            prev = Date.now()
        }
    }
}

区别

防抖动是将多次执行变为最后一次执行。

节流是将多次执行变成每隔一段时间执行。

组件使用

import { debounce, throttle } from '@/utils/index';

getData: throttle(function() {
     // 要做的事情
}, 2000)

resize: debounce(function() {
     // 要做的事情
}, 2000)