暂停Javascript幻灯片按钮 [英] Pause button for Javascript slideshow

问题描述

我正在尝试为JavaScript幻灯片创建一个暂停按钮，该幻灯片是显示随机图像的无限循环.错误控制台不会引发任何错误.幻灯片开始播放，但是按钮的值没有变为暂停状态(我一直在玩它，并且过去一直在玩).如果按两次按钮，幻灯片放映会更快.答案可能在clearTimeout(t)内；某个地方，但我似乎无法使其正常工作.这是脚本:

I am trying to create a pause button for a JavaScript slideshow that is an infinite loop that displays random images. The error console doesn't throw any errors. The slideshow starts, but the button's value doesn't become pause (I have been playing around with it and it used to). If you press the button twice the slideshow gets faster. The answer is probably lies within a clearTimeout(t); somewhere but I can't seem to make it work. Here is the script:

<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()时，它将启动循环.循环结束

First, whenever you call keeprollin(), it starts a loop. The loop goes

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

此链一旦启动就永远不会停止.通过将var t设置为setTimeout返回的值，您具有正确的想法，但是将t设置为值"stopped"并不会停止该循环.您需要使用clearTimeout(t)停止循环.

You never stop this chain once it starts. You had the right idea by setting var t as the value returned by setTimeout, but setting t to the value "stopped" doesn't stop this cycle. You need to use clearTimeout(t) to stop the cycle.

第二，var t的范围已关闭.在一个函数中，var t会将变量的范围绑定到该函数，而在任何其他函数中都无法访问.如果放下var行，这会将值绑定到window，并且t变量将在您引用它的任何位置正确设置.

Second, the scope of your var t is off. In a function, var t will tie the scope of the variable to the function, which won't be accessible in any other function. If you drop the var line, this will tie the value to the window, and the t variable will be properly set wherever you reference it.

第三，不要使用字符串的长度来确定要执行的操作，只需比较字符串即可. switcha.getAttribute("value").length==9应该是switcha.getAttribute("value") == 'Slideshow'

Third, don't use the length of the string to determine what you want to do, just compare strings. switcha.getAttribute("value").length==9 should be switcha.getAttribute("value") == 'Slideshow'

第四，不要将您的函数或变量命名为怪异或有趣的名称.如果您的命名具有描述性，则可以避免将来自己和其他人头疼.它将使您的代码更易于阅读.

Fourth, don't name your functions or variables weird or funny names. You'll save yourself and others headache in the future if you are descriptive in your naming. It will make your code much easier to read.

...现在正在咆哮:)

... done ranting now :)

这篇关于暂停Javascript幻灯片按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！