节流、防抖、Promise和动画：让你的JS代码更高效

2023-09-08 23:43:58

在JavaScript中，节流、防抖、Promise和动画都是非常重要的概念。掌握这些概念并熟练使用，可以大幅提高你的代码效率和性能，带来更好的用户体验。

节流

节流是一种技术，用于限制函数在指定时间间隔内执行的次数。这对于处理高频触发的事件非常有用，例如滚动事件或键盘事件。

节流的原理很简单。当事件发生时，我们先检查一下自上次执行函数以来是否已经超过了指定的间隔时间。如果超过了，我们就执行函数。否则，我们就丢弃这次事件。

实现方法

节流函数的实现方法有很多种。最简单的一种方法是使用setTimeout函数。

function throttle(func, wait) {
  let lastCallTime = 0;

  return function (...args) {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      lastCallTime = now;
      func.apply(this, args);
    }
  };
}

防抖

防抖是一种技术，用于延迟函数的执行，直到事件停止触发一段时间后才执行。这对于处理用户输入的事件非常有用，例如输入框中的文本变化事件。

防抖的原理也很简单。当事件发生时，我们先启动一个计时器。如果在计时器到期之前事件再次发生，我们就重新启动计时器。只有当计时器到期且在此期间事件没有再次发生时，我们才执行函数。

实现方法

防抖函数的实现方法也有很多种。最简单的一种方法是使用setTimeout函数和一个标志变量。

function debounce(func, wait) {
  let timerId;

  return function (...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

Promise

Promise是一种异步编程的方式。它可以让你在执行异步操作时，不用等待操作完成就可以继续执行后面的代码。

基本用法

Promise的用法非常简单。首先，你需要创建一个Promise对象。你可以使用Promise构造函数来创建Promise对象。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

然后，你可以使用then方法来指定当Promise对象的状态改变时要执行的代码。

promise.then(result => {
  // Promise对象状态变为resolved时要执行的代码
}, error => {
  // Promise对象状态变为rejected时要执行的代码
});

动画

动画是让元素在一段时间内从一种状态过渡到另一种状态的过程。在JavaScript中，可以使用CSS动画或JavaScript动画来实现动画效果。

CSS动画

CSS动画是一种使用CSS来实现动画效果的技术。CSS动画的语法非常简单，你只需要在元素的样式中添加animation属性即可。

.element {
  animation: my-animation 1s infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100px);
  }
}

JavaScript动画

JavaScript动画是一种使用JavaScript来实现动画效果的技术。JavaScript动画的语法比CSS动画复杂一些，但它更灵活，可以实现更复杂的动画效果。

const element = document.querySelector('.element');

function animate() {
  element.style.transform = `translateX(${x}px)`;
  x += 1;

  if (x < 100) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);