JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）

前言

上一篇文章已经介绍了JavaScript实现跑马灯抽奖活动的基本思路和代码，在这篇文章中，我们将分析、优化并完善之前的代码。接下来我们将介绍具体的步骤。

代码优化

1. 变量申明

原来的代码中，所有的变量都是使用var声明的。但是var是在函数中申明变量的，会存在变量提升的问题。所以优化的第一步是使用let和const来代替var，确保变量只在需要使用的代码块内部定义。

2. 代码简化

原来的代码在每次转动时都需要重新计算距离，这样会增加代码的复杂度和运行时间。我们可以将转动距离提前进行预处理，避免重复计算。

同时，我们可以将一些重复代码进行封装，使代码更加简洁易读。

3. 细节优化

在实际使用中，用户可能会连续多次点击开始按钮，这样会导致每个跑马灯都在不停地旋转，造成资源浪费。我们可以添加一些判断措施，确保每次只有一个跑马灯在旋转。

完整代码

下面是优化后的完整代码：

const lottery = document.querySelector(".lottery");
const startBtn = document.querySelector(".start-btn");

startBtn.addEventListener("click", () => {
  if (lottery.classList.contains("active")) return; // 判断是否已经在旋转

  const prizes = ["电视", "手机", "平板电脑", "电饭煲"];
  const prizeIndex = Math.floor(Math.random() * prizes.length);
  const prize = prizes[prizeIndex];

  lottery.classList.add("active");

  let rotateCount = 0;
  const rotateUnit = 45; // 每次旋转的角度
  const rotateNum = 8; // 旋转次数
  const totalAngle = rotateNum * 360 + prizeIndex * rotateUnit; // 总的旋转角度

  for (let i = 0; i < 4; i++) {
    const list = lottery.querySelector(`.list-${i}`);
    list.style.transform = `rotate(${totalAngle}deg)`;
  }

  setTimeout(() => {
    lottery.classList.remove("active");
    alert(`恭喜你获得了${prize}`);
  }, 4000);
});

示例说明

示例一

在原来的代码中，每次旋转时都需要重新计算距离。下面是优化前的代码：

const rotate = (index, deg, speed, timer) => {
  const lottery = document.querySelector(".lottery");
  const lists = lottery.querySelectorAll(".list");
  const distance = index * avgDeg - deg; // 计算距离
  let speedMod = speed;

  clearInterval(timer);

  timer = setInterval(() => {
    if (speedMod > 0 && distance < 0) {
      // 是否需要旋转到下一个转盘
      distance += 360;
    } else if (speedMod < 0 && distance > 0) {
      // 是否需要旋转到上一个转盘
      distance -= 360;
    }
    deg += speedMod;

    if (Math.abs(distance - speedMod) < Math.abs(speedMod)) {
      // 最后一步旋转到奖品
      deg += distance;
      clearInterval(timer);
    }

    distance -= speedMod;
    speedMod *= 0.98; // 加速度递减
    speedMod = speedMod < 0.1 ? 0.1 : speedMod; // 最小速度为0.1

    lists.forEach((list, i) => {
      const itemDeg = avgDeg * i;
      list.style.transform = `rotate(${deg + itemDeg}deg)`;
    });
  }, 10);

  return timer;
};

可以看到，每次计算距离的代码比较麻烦。我们可以在代码中预处理需要旋转的角度，避免重复计算。下面是优化后的代码：

const rotate = (index, deg, speed, timer) => {
  const lottery = document.querySelector(".lottery");
  const lists = lottery.querySelectorAll(".list");
  let speedMod = speed;

  clearInterval(timer);

  timer = setInterval(() => {
    deg += speedMod;
    rotateCount++;

    if (rotateCount >= rotateNum && (deg - totalAngle) % 360 == 0) {
      clearInterval(timer);
      rotateCount = 0;
      lottery.classList.remove("active");
      alert(`恭喜你获得了${prize}`);
      return;
    }

    speedMod *= 0.98;
    speedMod = speedMod < 0.1 ? 0.1 : speedMod;

    lists.forEach((list, i) => {
      const itemDeg = i * rotateUnit;
      list.style.transform = `rotate(${deg + itemDeg}deg)`;
    });
  }, 10);

  return timer;
};

示例二

在实际使用中，用户可能会连续多次点击开始按钮，这样会导致每个跑马灯都在不停地旋转，造成资源浪费。我们可以添加一些判断措施，确保每次只有一个跑马灯在旋转。下面是添加判断措施后的代码：

const lottery = document.querySelector(".lottery");
const startBtn = document.querySelector(".start-btn");
let isRunning = false; // 判断是否正在旋转

startBtn.addEventListener("click", () => {
  if (isRunning) return; // 判断是否已经在旋转

  isRunning = true;

  const prizes = ["电视", "手机", "平板电脑", "电饭煲"];
  const prizeIndex = Math.floor(Math.random() * prizes.length);
  const prize = prizes[prizeIndex];

  lottery.classList.add("active");

  let rotateCount = 0;
  const rotateUnit = 45; // 每次旋转的角度
  const rotateNum = 8; // 旋转次数
  const totalAngle = rotateNum * 360 + prizeIndex * rotateUnit; // 总的旋转角度

  for (let i = 0; i < 4; i++) {
    const list = lottery.querySelector(`.list-${i}`);
    list.style.transform = `rotate(${totalAngle}deg)`;
  }

  setTimeout(() => {
    isRunning = false;
    lottery.classList.remove("active");
    alert(`恭喜你获得了${prize}`);
  }, 4000);
});

在上面的代码中，我们添加了一个isRunning变量来判断是否正在旋转，如果已经在旋转了，就不执行后续操作。这样就可以避免资源浪费了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现跑马灯抽奖活动实例代码解析与优化（二） - Python技术站