时间戳

首页 > 解决方案 > 即使先清除 setTimeout 函数也会加倍

javascript - 即使先清除 setTimeout 函数也会加倍

问题描述

我在 img/ 目录 (1-13.jpg) 中有图像，我需要遍历它们。如果它已经编辑并更改为图像然后它#next_container应该是循环，但是当我点击它时按预期运行该功能但由于某种原因并没有停止旧的超时，我最终运行了两个函数这会导致图像变化得更快，并且当它被编辑时，应该只获取图像，但由于某种原因循环。同样的情况发生在.stop();start();srcnext();start();#next_containernext();stop(); start();stop();#next_containernext();start();#prev_container

HTML 代码：

<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>

JavaScript 代码：

// the images array holds sources for all the images
function next(){
    var element = document.getElementById("imgs");
    var num = Number(element.src.split("/").slice(-1)[0].split(".")[0]);
    if (num == images.length){
        element.src = "img/1.jpg";
        document.getElementById("count").innerHTML = "1 / 13";
    } else {
        num++;
        element.src = images[num-1];
        document.getElementById("count").innerHTML = num.toString()+" / 13";
    }
}
function prev(){
    var element = document.getElementById("imgs");
    var num = Number(element.src.split("/").slice(-1)[0].split(".")[0]);
    if (num == 1){
        element.src = "img/13.jpg";
        document.getElementById("count").innerHTML = "13 / 13";
    } else {
        num--;
        element.src = images[num].src;
        document.getElementById("count").innerHTML = num.toString()+" / 13";
    }
}
function start(){
    window.timeout = setTimeout("next()", 3000);
    document.getElementById("player").src = "img/pause.png";
    document.getElementById("player").onclick = function(){ stop(); };
    document.getElementById("next_container").onclick = function(){ stop(); next(); start(); };
    document.getElementById("prev_container").onclick = function(){ stop(); prev(); start(); };
}
function stop(){
    clearTimeout(window.timeout);
    document.getElementById("player").src = "img/play.png";
    document.getElementById("player").onclick = function(){ start(); };
    document.getElementById("next_container").onclick = function(){ next(); };
    document.getElementById("prev_container").onclick = function(){ prev(); };
}

标签： javascripthtmlsettimeout

解决方案

因为 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()。有你的两个计时器。在 next 和 prev 调用之后删除 start()。

推荐阅读