理解为什么 JavaScript 函数不能在循环内正确重复

Arthur Petit
2024年10月7日星期一 下午3:02:33
Asynchronous

修复 JavaScript 循环内的函数重复

有时，在 JavaScript 中使用循环时，这些循环内的函数可能不会按预期运行。例如，在您想要动画或重复动作的场景中，即使循环运行多次，该函数也可能只触发一次。

当您尝试在屏幕上移动箭头或框等元素并且该操作没有按预期重复时，这可能会特别令人沮丧。循环可能会记录正确的值，但无法连续执行该函数。

在 JavaScript 中，这种问题经常出现的原因是 或计时器，例如 ，与循环交互。了解此行为对于正确管理 Web 应用程序中的重复操作至关重要。

在本文中，我们将解决一个常见问题：循环按预期记录值，但它调用的函数不会重复其操作。我们将探讨为什么会发生这种情况以及如何确保函数在每次循环迭代中一致执行。

命令 使用示例
clearInterval() 用于停止由 setInterval() 设置的计时器，防止该函数无限期运行。这对于控制动画的重复至关重要。
setInterval() 以指定的时间间隔（以毫秒为单位）执行函数。在这种情况下，它会触发移动元素的动画，直到满足特定条件。
resolve() 在 Promise 结构中，resolve() 发出异步操作完成的信号，允许循环的下一次迭代在动画结束后继续。
await 暂停循环执行，直到异步函数（动画）完成。这可确保每个动画周期在下一个动画周期开始之前完成。
Promise() 将异步操作包装在 Promise 对象中，以便在执行动画等重复操作时更好地控制时间和流程。
new Promise() 构造一个 Promise 对象，用于处理异步操作。在这种情况下，它管理每个循环迭代的动画序列。
console.log() 将变量或操作的当前状态记录到浏览器控制台，这对于调试很有用。在这里，它用于跟踪循环计数器和元素位置。
let 块范围的变量声明。在示例中，它用于声明 sicocxle 和 dos 等控制循环迭代和元素移动的变量。
document.getElementById() 获取具有指定 ID 的 DOM 元素。这允许脚本在动画期间操纵箭头元素的位置。

探索 JavaScript 循环中的函数执行

上面的脚本解决的主要问题是确保在 a 内部调用的函数 行为符合预期。在示例中，循环正确记录了值 9、8、7 等，但函数 不重复其运动。原因是循环多次执行该函数，但每次动画都会在下一次迭代开始之前完成。此问题的解决方案是控制函数的异步行为方式，并确保每个动画在下一次迭代之前完成。

在第一个脚本中，我们使用了 为动画创建定时循环。此方法通过递减元素的位置值并使用 JavaScript 更新其 CSS 样式来移动元素。但是，循环不会等到动画完成才再次调用该函数。通过使用 ，该脚本确保计时器在迭代之间重置，从而防止任何重叠或不当行为。但是，这仍然无法有效地控制每个循环迭代的时间以实现平滑的动画。

第二个脚本在第一个脚本的基础上进行了改进，引入了 处理异步操作。通过将运动逻辑包装在一个 ，我们确保函数 srol() 仅在动画结束后完成。这 关键字强制循环暂停，直到动画完成，从而创建平滑、顺序的运动执行。此方法使动画可预测，并避免任何意外的重叠或运动周期的提前终止。

在最终方法中，我们实现了 后端在服务器环境中模拟动画逻辑。虽然这种类型的动画通常在前端执行，但控制服务器端的计时可以更精确地控制动画，特别是在高性能应用程序或处理服务器与客户端交互时。这个版本还使用了 和 处理计时，确保运动一致并在进入下一个迭代之前正确完成。

JavaScript 中的循环和计时器交互问题

该解决方案使用普通 JavaScript 进行前端 DOM 操作，重点关注使用循环和 设置时间间隔。

let sicocxle = 9; // Initial loop counter
let od = 0; // Timer control variable
let dos = 0, dosl = 0; // Variables for element position
function srol() {
  let lem = document.getElementById("arrow"); // Get the element
  clearInterval(od); // Clear any previous intervals
  od = setInterval(aim, 10); // Set a new interval
  function aim() {
    if (dos > -100) {
      dos--;
      dosl++;
      lem.style.top = dos + 'px'; // Move element vertically
      lem.style.left = dosl + 'px'; // Move element horizontally
    } else {
      clearInterval(od); // Stop movement if limit reached
    }
  }
}
// Loop to trigger the animation function repeatedly
for (sicocxle; sicocxle > 1; sicocxle--) {
  console.log(sicocxle); // Log loop counter
  srol(); // Trigger animation
}

异步控制的改进方法

该解决方案利用 为了更好地控制 JavaScript 中的异步执行。

let sicocxle = 9; // Loop counter
let dos = 0, dosl = 0; // Position variables
let od = 0; // Timer variable
function srol() {
  return new Promise((resolve) => {
    let lem = document.getElementById("arrow");
    clearInterval(od);
    od = setInterval(aim, 10);
    function aim() {
      if (dos > -100) {
        dos--;
        dosl++;
        lem.style.top = dos + 'px';
        lem.style.left = dosl + 'px';
      } else {
        clearInterval(od);
        resolve(); // Resolve promise when done
      }
    }
  });
}
// Async function to wait for each iteration to complete
async function runLoop() {
  for (let i = sicocxle; i > 1; i--) {
    console.log(i);
    await srol(); // Wait for each animation to finish
  }
}
runLoop();

使用 Node.js 进行服务器端时序控制的后端脚本

这种方法涉及使用 Node.js 在服务器端控制时间和操作。我们模拟动画逻辑以确保一致性和性能。

const http = require('http');
let dos = 0, dosl = 0; // Position variables
let sicocxle = 9; // Loop counter
let od = null; // Timer variable
function aim() {
  return new Promise((resolve) => {
    od = setInterval(() => {
      if (dos > -100) {
        dos--;
        dosl++;
        console.log(`Moving: ${dos}, ${dosl}`);
      } else {
        clearInterval(od);
        resolve(); // Stop interval after completion
      }
    }, 10);
  });
}
async function runLoop() {
  for (let i = sicocxle; i > 1; i--) {
    console.log(`Loop count: ${i}`);
    await aim(); // Wait for each animation to finish
  }
}
runLoop();
// Set up HTTP server for backend control
http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Loop and animation running!');
}).listen(3000);
console.log('Server running at http://localhost:3000');

解决具有延迟操作的循环中的函数执行问题

解决函数在循环内不重复问题的另一个关键方面是了解如何 作品。在许多情况下，出现问题的原因是循环同步运行，而循环内部的函数异步执行。 JavaScript 事件循环管理函数的执行方式，特别是当存在异步操作时，例如 或者 。如果没有正确的处理，异步操作可能无法与循环的执行流程很好地保持一致，从而导致函数无法正确重复。

在这种情况下，一个常见的错误是没有考虑到 JavaScript 的非阻塞特性。由于 JavaScript 是单线程的，因此需要使用回调、promise 或异步函数来处理动画等操作，以确保每次迭代都等待动画或函数完成。在我们的例子中，使用 保证函数在进入下一次迭代之前等待间隔完成，从而防止循环执行得太快并错过过程中的步骤。

处理循环内重复操作的另一种有用方法是利用自定义计时机制或 requestAnimationFrame，它比 setInterval 提供更多的动画控制。 与浏览器的刷新率同步，确保动画更流畅，无需手动计时。这在处理复杂动画或优化性能时非常有用，尤其是在高强度 Web 应用程序中。通过利用这些策略，您可以避免函数无法在循环中正确重复的问题。

  1. 为什么我的函数不在循环内重复？
  2. 这种情况经常发生，因为循环是同步运行的，但其中的函数是异步运行的。使用 或承诺解决这个问题。
  3. 如何修复 JavaScript 中的动画时间？
  4. 使用 或者 用于控制动画的时间。后者对于复杂的动画更有效。
  5. 循环中clearInterval的作用是什么？
  6. 停止重复 setInterval 设置的函数。这对于管理动画何时停止或重置至关重要。
  7. 为什么我的循环运行速度比动画快？
  8. 循环是同步的，但动画是异步的。使用 在循环内使其等待动画完成后再继续。
  9. 我可以使用 setTimeout 而不是 setInterval 来重复操作吗？
  10. 是的，但是 用于延迟单个动作，而 更适合定期重复的动作。

在同步循环中处理异步函数可能具有挑战性，但是通过使用类似的方法 , ， 和 ，您可以将每个循环迭代的执行与函数的完成同步。这确保了流畅的动画而没有计时问题。

通过仔细控制时间并在需要时重置间隔，您的动画将按预期运行，并一致重复。这些技术可以显着提高 Web 应用程序中 JavaScript 动画的性能和可预测性，确保在各种环境中正确执行。

  1. 本文是基于对 JavaScript 事件循环、异步函数和计时机制的详细研究和了解而创建的。其他信息来自信誉良好的开发资源，例如 MDN 网络文档 - 循环和迭代 。
  2. 关于处理异步 JavaScript 和使用的见解 Promise 和异步函数 是从 JavaScript Info 网站收集的。
  3. 该部分关于 Node.js 定时器 后端控制由 Node.js 官方文档告知，以确保准确的技术细节。