2

好的，所以我有一个非常简单的图像幻灯片，它在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);
};
4

3 回答 3

4

问题是你的变量的范围。移出var timer;您的文档就绪功能，它将起作用。当然，这使它成为全球性的，这很糟糕。因此，您可能希望将 StartShow 移动到您的文档就绪功能中。

于 2013-09-20T23:20:28.113 回答
2

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

解决方案是创建timer一个全局变量，或者更好地重新组织您的代码以使用闭包。

JS 小提琴演示

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

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();
于 2013-09-20T23:19:39.417 回答
2

startShow正在分配全局变量timer，但是当您调用时，clearTimeout您位于声明document.ready(function() {...})局部变量的位置timer。该局部变量会影响全局变量。

要么摆脱var timer;声明，要么移动startShow()到 ready 函数中。

于 2013-09-20T23:20:06.423 回答