Функции setTimeout удваиваются, даже когда очищаются первыми - PullRequest
Новая
       7

Функции setTimeout удваиваются, даже когда очищаются первыми

0 голосов
/ 10 января 2019

У меня есть изображения в каталоге img / (1-13.jpg), и мне нужно их просмотреть. #next_container должен stop(); цикл, если он уже start(); отредактирован и изменить src на next(); изображение, затем start(); это снова, но когда я нажимаю #next_container, он запускает next(); функционирует как ожидалось, но по какой-то причине stop(); не останавливает старое время ожидания, и я получаю две start(); функции, которые заставляют изображения меняться быстрее и когда stop(); ed #next_container должен получить только изображение next();, но по какой-то причине цикл start(); s. то же самое происходит для #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(); };
}

1 Ответ

0 голосов
/ 10 января 2019

Потому что загрузка загружается для каждого загружаемого вами изображения. Пример, показывающий это. 

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 () после следующего и предыдущего вызовов.

...