javascript 性能问题中的设置超时

Question

问题

我正在构建 算法模拟器 工具来模拟算法的工作原理。在 BFS 算法中我想放慢结果显示速度

所以我在每一步之后使用 setTimeout 函数等待大约 10 毫秒，然后再进行下一步。我使用 promise 可以使用 async 轻松等待整个周期并强制算法停止直到等待函数完成

功能实现

function wait(time) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, time);
    })
}

BFS

while (queue.length) {
    let currentId = queue[index++];
    let tile = board.tileOf(currentId);
    tile.visit();
    if (currentId == targetId) {
        return;
    }
    await wait(10);
    for (let direction of DIRECTIONS) {
        let childId = moveId(currentId, direction);
        if (childId == undefined)
            continue;
        childId = parseInt(childId);
        let child = board.tileOf(childId);
        if (child.available()) {
            child.visit(true);
            queue.push(childId);
            pervNode[childId] = currentId;
        }
    }
}

问题是当我运行代码工作正常但有时显示解决方案需要很长时间，超过 10 毫秒。

我想知道为什么它不准确？这是因为我使用的方法吗？如果有更好的解决方案，那会是什么？

Try the tool from here

Answer 1

由于 JavaScript 是一种 single-thread 语言，当您在 setTimeout() 中放置函数调用时，此函数进入队列并等待直到调用堆栈中的其他函数（在它之前被调用）完成并且调用堆栈变为空。您指定为 setTimeout() 的第二个参数的时间从将函数放入队列的那一刻开始计算，但并不总是队列为空

Answer 2

我不知道实际输出，但我认为这可行

while (queue.length) {
  let currentId = queue[index++];
  let tile = board.tileOf(currentId);
  tile.visit();
  if (currentId == targetId) {
    return;
  }
  let timer;
  const loop = () => {
    for (let direction of DIRECTIONS) {
      let childId = moveId(currentId, direction);
      if (childId == undefined) continue;
      childId = parseInt(childId);
      let child = board.tileOf(childId);
      if (child.available()) {
        child.visit(true);
        queue.push(childId);
        pervNode[childId] = currentId;
      }
    }
  };
  const listener = () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      loop();
    }, 100);
  };
  listener();
}

javascript 性能问题中的设置超时

Settimeout in javascript performance issue

javascript

settimeout

问题

功能实现

BFS