Question

好的，我有一个非常简单的图片幻灯片放在这里，它在jsfiddle

你们可以看到单击“开始”时它可以正常工作。但是当你单击停止时，该函数继续运行是jquery：

$(document).ready(function() {
    var timer;
    $('img.hidden').hide();
    $('img.top').show();

    $('input').click(function(){
            var value = $('input').attr("value");

    if(value == "start"){

    $(this).attr("value","stop");
    startShow();

    }else if(value == "stop"){
            $(this).attr("value","start");
            alert('stopped');
            clearTimeout(timer);

        }   
    });

 });

 function startShow(){
   var $top = $('img.top').attr("src");
   var $last = $('img').last().attr("src");

   if($top != $last ){

    var $topImg = $('img.top');
    var $nextImg = $('img.top').next();

    $topImg.hide();
    $nextImg.show();

    $topImg.removeClass("top");
    $nextImg.addClass("top");
   }
   else{

    var $topImg = $('img.top');
    var $nextImg = $('img').first();

    $topImg.hide();
    $nextImg.show();

    $topImg.removeClass("top");
    $nextImg.addClass("top");

   }
   timer = setTimeout(function() { startShow(); }, 2000);
};

Answer 1

问题在于变量的范围。将var timer;移到文档就绪功能之外，它将起作用。当然，这使它成为一个全球性的，这是不好的。因此，您可能希望将StartShow移动到文档就绪函数中。

Answer 2

timer在$(document).ready函数中声明为局部变量，因此在startShow函数中不可用。

解决方案是使timer成为全局变量，或者更好地重新组织代码以使用闭包。

JS Fiddle Demo

让我用一个例子来解释发生了什么。

function main() {
  var x = 3; // declare a local copy of x, available only in this function
  setValueOfX(); // Try to change the value of x (doesn't work)
  console.log(x); //Prints 3
}

function setValueOfX() {
  x = 12; // You would expect this to change the value of x, but it only changes the value of the global x (window.x), not the local x, so this won't work
}
main();

Answer 3

startShow正在分配全局变量timer，但是当您调用clearTimeout时，您就在document.ready(function() {...})内，其中声明了本地变量timer。该局部变量会影响全局变量。

要么摆脱var timer;声明，要么在准备好的功能中移动startShow()。

停止setTimeout函数

3 个答案: