Question

我正在尝试为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()" />

谢谢！

Answer 1

一些问题：

首先，无论何时拨打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'

第四，不要将你的函数或变量命名为奇怪或有趣的名字。如果您在命名中有描述性，那么您将来会为自己和其他人留下头痛的问题。它将使您的代码更容易阅读。

...现在咆哮：）

Answer 2

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");
}

可能更符合您的要求。

Answer 3

(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不再是全局的。

暂停Javascript幻灯片的按钮

3 个答案: