Блог

Я пытаюсь создать кнопку паузы для слайд-шоу JavaScript, которая представляет собой бесконечный цикл, отображающий случайные изображения. Консоль ошибок не выдает никаких ошибок. Слайд-шоу запускается, но значение кнопки не становится паузой (я играл с этим, и раньше так и было). Если вы нажмете кнопку дважды, слайд-шоу ускорится. Ответ, вероятно, лежит в пределах clearTimeout (t); где-то, но, похоже, я не могу заставить это работать. Вот сценарий:

 <script type="text/javascript">
var t;
function letsslide(){
     var switcha = document.getElementById("SlideShow");
     if (switcha.getAttribute("value").length == 9) {
           switcha.setAttribute("value", "Pause");
           keeprollin();
     }
     if (switcha.getAttribute("value").length == 5) {
           t = "stopped";
           switcha.setAttribute("value", "Slideshow");
     }
}
function keeprollin(){
     var t = setTimeout("magic()", 2000);
}
function magic(){
     var dazp = Math.ceil(Math.random() * 35);
     document.getElementById('bigpic').setAttribute("src", "images/"   dazp   ".jpg");
     keeprollin();
}
</script>
  

Вот HTML:

 <img src="images/9.jpg" id="bigpic" />
<input type="submit" id="SlideShow" value="Slideshow" onclick="letsslide()" />
  

Спасибо!

Несколько проблем:

Во-первых, всякий раз, когда вы вызываете keeprollin() , запускается цикл. Цикл продолжается

 keeprollin()
magic()
keeprollin()
margin()
...infinite
  

Вы никогда не остановите эту цепочку, как только она начнется. У вас была правильная идея, установив var t в качестве значения, возвращаемого с помощью setTimeout , но установка t значения «остановлено» не останавливает этот цикл. Вам нужно использовать clearTimeout(t) , чтобы остановить цикл.

Во-вторых, область вашего var t просмотра отключена. В функции var t привязывает область действия переменной к функции, которая не будет доступна ни в какой другой функции. Если вы удалите var строку, это привяжет значение к window , и t переменная будет правильно установлена везде, где вы на нее ссылаетесь.

В-третьих, не используйте длину строки, чтобы определить, что вы хотите сделать, просто сравните строки. switcha.getAttribute("value").length==9 должно быть switcha.getAttribute("value") == 'Slideshow'

В-четвертых, не называйте свои функции или переменные странными или забавными именами. Вы избавите себя и других от головной боли в будущем, если будете использовать описательные названия. Это значительно облегчит чтение вашего кода.

… закончил разглагольствовать 🙂

 (function() {
    var t;

    function letsslide() {
        var switcha = document.getElementById("SlideShow");
        if (switcha.value === "Slideshow") {
            switcha.value = "Pause";
            t = setTimeout(magic, 2000);
        }
        if (switcha.value === "Pause") {
            switcha.value = "Slideshow";
            clearTimeout(t);
        }
    }

    window.letsslide = letsslide;

    function magic() {
        var dazp = Math.ceil(Math.random() * 35);
        document.getElementById('bigpic').src = "images/"   dazp   ".jpg";
        t = setTimeout(magic, 2000);
    }

})();
  

Переработано так, чтобы оно работало. Добавлено закрытие, поэтому t оно больше не является глобальным.

 var t;
function startSlideshow() {
     t = setInterval(magic, 2000);
}
function letsslide(){
     var switcha = document.getElementById("SlideShow");
     if (switcha.getAttribute("value").length == 9) {
           startSlideshow();
           switcha.setAttribute("value", "Pause");
     }
     if (switcha.getAttribute("value").length == 5) {
           clearTimeout(t);
           switcha.value = "Slideshow";
     }
}
function magic(){
     var dazp = Math.ceil(Math.random() * 35);
     document.getElementById('bigpic').setAttribute("src", "images/"   dazp   ".jpg");
}
  

Вероятно, это больше то, что вы хотите.