Question

我正在尝试调用一个函数，该函数在函数运行时清除timeOut（停止动画循环）。这就是我现在正在尝试的事情：

function gameStop(){
  clearTimeout(gameLoop);
}

function gameLoop() {
  $('h1').show("slow")
           .animate({"marginLeft":"300px"},4000)
            .animate({"marginLeft":"0px"},4000);
 $('h1').click(function(){
   gameStop();
 });
 gameLoop();
}

 setTimeout(gameLoop, 4000);

 gameLoop();

Answer 1

哇老实说，这看起来很混乱。首先，您不希望在每个游戏循环中添加点击事件，因此请将其放在游戏循环之外的某个位置。第二：清除超时不会像这样工作。并且具有相同名称的nasting函数通常非常糟糕......

尝试这样的事情（不知道代码是否有效或者你的循环是否有意义，但这实际上是你想要的）。

var timeOut = null;  

$('h1').click(function(){
clearTimeout(timeOut);
});

function gameLoop(){
$('h1').show("slow")
    .animate({"marginLeft":"300px"},4000)
    .animate({"marginLeft":"0px"},4000);
};
timeOut = setTimeout(gameLoop, 4000);

Answer 2

你实际上不需要setTimeout，使用武力，卢克！使用.animate()回调来循环你的功能：

LIVE DEMO

jQuery(function($) { // DOM ready

    function gameLoop() {
      $('h1').show("slow")
           .animate({marginLeft: 300}, 4000)
           .animate({marginLeft: 0  }, 4000, gameLoop); // LOOP HERE
    }
    gameLoop(); // START

    $('h1').click(function(){
       $(this).stop();
    });

});

甚至更简单： DEMO

var mrg = [300,0];

(function gameLoop() {
  $('h1').animate({marginLeft: mrg.reverse()[1]}, 4000, gameLoop);
})();

$('h1').click(function(){
   $(this).stop();
});

缓存选择器以获得更好的性能和动画取决于当前的保证金位置： DEMO

var $h1 = $('h1'); // Cache your selectors

(function gameLoop() {
  var m = parseInt( $h1.css('marginLeft'), 10);
  $h1.animate({marginLeft: m>0?0:300 }, 4000, gameLoop);
})();

$h1.click(function(){
   $(this).stop();
});

Answer 3

我会将超时存储在变量和标志中，以指示用户是否已停止游戏：

类似的东西（未经测试）

var timeOut = null; 

var stopped = false; 

$('h1').click(function(){
stopped = true;
});

function gameLoop()
{
      clearTimeout(timeOut);

     $('h1').show("slow")
    .animate({"marginLeft":"300px"},4000)
    .animate({"marginLeft":"0px"},4000);

     if (!stopped)
     {
          timeOut = setTimeout(gameLoop, 100);
     }
};

timeOut = setTimeout(gameLoop, 4000);

clearTimeout在运行时自己的功能

3 个答案: