Question

我正在使用setTimeout来运行幻灯片。我想要按钮来阻止它。标记是：

<h3> Modest Mouse at Fillmore in Miami <h3>

  <div>
     <img id="photo" src="http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg" alt= "Modest Mouse at Fillmore">
      <span>&bull;</span>
      <span>&bull;</span>
      <span>&bull;</span>

  </div>

  <button onclick="stopShow();">Stop</button>

JS是：

var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg",
  "http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg",
  "http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg"
];

  // Timer for SlideShow

 var i = 0;
  function changeSlide()  {  
           var stopShowID;
           stopShowID = window.setTimeout(function()  {
              newPic = aSlideShowPics[i];     
              $("#photo").attr("src", newPic);
              i++;
              if (i < aSlideShowPics.length)  {
                 changeSlide();  // recursive call to increment i and change picture in DOM.
              }  else  {
                       i = 0;  // reset loop to keep slideshow going
                       changeSlide(); // Recursive call on loop end
                 }

              function stopShow() {
                window.clearTimeout(stopShowID);
              }
         }, 3000)
  }

 changeSlide();

我在没有stopShow的按钮点击时一直收到引用错误。我已经尝试将clearTimeout函数放在代码中的几个位置但是得到相同的错误。也许一组新的眼睛可以看到我的错误。这是jsfiddle。感谢您的任何意见。

Answer 1

将stopShow移动到超时之外且在changeSlide之外。

var stopShowID;
function changeSlide()  { 
    stopShowID = window.setTimeout( function(){}, 3000);       
}
function stopShow() { 
    if(stopShowID) {
        window.clearTimeout(stopShowID);
        stopShowID = null;
    }
}

Answer 2

我无法启动您的jsfidle示例，因此我更新了您的代码内容，提出了2个问题：

1-您的stopShow未定义，因此我将其附加到窗口范围： window.stopShow = stopShow;

2-对于ClearTimeout范围问题：您的stopShowID变量位于函数changeSlide内：您的stopShow使用的是本地副本。我基本上将它作为一个全局变量，因此两个函数都可以访问它。

var aSlideShowPics = ["http://the305.com/blog/wp-content/uploads/2014/05/modestmouse3.jpg",
  "http://the305.com/blog/wp-content/uploads/2014/05/modestmoude7.jpg",
  "http://the305.com/blog/wp-content/uploads/2014/05/modestmouse8.jpg"
];

  // Timer for SlideShow

var stopShowID; 
 var i = 0;

function stopShow() {
    window.clearTimeout(stopShowID);
}

window.stopShow = stopShow;

  function changeSlide()  {  

           stopShowID = window.setTimeout(function()  {
              newPic = aSlideShowPics[i];     
              $("#photo").attr("src", newPic);
              i++;
              if (i < aSlideShowPics.length)  {
                 changeSlide();  // recursive call to increment i and change picture in DOM.
              }  else  {
                       i = 0;  // reset loop to keep slideshow going
                       changeSlide(); // Recursive call on loop end
                 }


         }, 3000)
  }


 changeSlide();

工作jsfiddle：
http://jsfiddle.net/fLw2a4vs/44/

Answer 3

stopShow（）方法在窗口级别不存在，它只存在于changeSlide（）体内。直接将其附加到窗口

window.stopShow = function() ...

或将其拉出封闭

var i = 0;
var stopShowId;
function stopShow() {
     window.clearTimeout(stopShowID);
}

function changeSlide()  {  
     stopShowID = window.setTimeout(function()  {
         if (i >= aSlidesShowPics.length - 1)
             i = 0;

         var newPic = aSlideShowPics[i++];     
         $("#photo").attr("src", newPic);
         changeSlide();       
      }, 3000);
  }

使用clearTimeout的范围问题

3 个答案: