Question

我在img /目录（1-13.jpg）中有图像，我需要遍历它们。 #next_container应该stop();进行循环（如果已经start();编辑并将src更改为next();图像，然后再次start();），但是当我单击#next_container时，它按预期方式运行了next();函数，但是由于某种原因，stop();并没有停止旧的超时，最后我以 two start();函数正在运行，这会导致图像更改速度更快，并且stop();被#next_container处理后，只能获得next();图像，但由于某种原因循环{{1 } s。 start();也会发生同样的情况。

HTML代码：

#prev_container

JavaScript代码：

<div class="container">
    <img id="imgs" src="img/1.jpg" onload="start();">
    <div id="next_container" style="display: none;">
        <span id="next">&#x2771;</span>
    </div>
    <img id="player" src="" style="display: none;">
    <div id="prev_container" style="display: none;">
        <span id="prev">&#x2770;</span>
    </div>
    <p id="count">1 / 13</p>
</div>

Answer 1

因为加载的每个图片都会触发onload。显示它的示例。

function start() {
  console.log("I AM CALLED");
}

function loadNext () {
  document.querySelector("img").src = "http://placekitten.com/400/300"
}

window.setTimeout(loadNext, 2000);

<img src="http://placekitten.com/200/300" onload="start()" />

因此，您呼叫next(); start();，然后更改源，这样将导致"onload="start()"触发，而不是您呼叫start()。有两个计时器。在下一个和上一个调用之后，删除start（）。

setTimeout函数即使在第一次清除时也加倍

1 个答案: