动画里的防抖与节流

前端

2023-12-24 16:06:50

防抖与节流的概念

防抖和节流是JavaScript中常用的函数执行控制手段，常用于处理一些事件触发频繁的情况，避免不必要的函数调用或对系统造成过大的负荷。

防抖是指在一定时间间隔内，只执行一次函数。如果在该时间间隔内函数被多次调用，那么只有最后一次调用会被执行。

节流是指在一定时间段内，只执行一次函数。如果在该时间段内函数被多次调用，那么只有第一次调用会被执行，后面的调用都会被忽略。

防抖与节流在动画中的应用

防抖和节流在动画中都有着广泛的应用。例如，在滚动页面时，如果对每个滚动事件都进行处理，可能会导致动画卡顿或不流畅。这时，我们可以使用防抖或节流来控制函数的执行频率，从而避免动画卡顿或不流畅的情况发生。

使用canvas实现一个简单的防抖节流动画

我们可以使用canvas来实现一个简单的防抖节流动画，帮助您直观地理解防抖和节流的概念。

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

let requestId = null;

const draw = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'red';
  context.fillRect(0, 0, 100, 100);

  requestId = requestAnimationFrame(draw);
};

const debounce = (func, delay) => {
  let timer = null;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

const throttle = (func, delay) => {
  let last = 0;

  return function (...args) {
    const now = Date.now();

    if (now - last < delay) {
      return;
    }

    last = now;

    func.apply(this, args);
  };
};

const debouncedDraw = debounce(draw, 100);
const throttledDraw = throttle(draw, 100);

canvas.addEventListener('mousemove', debouncedDraw);
canvas.addEventListener('mousemove', throttledDraw);