javascript - 运行时在它自己的函数中清除超时

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

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

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

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()回调循环你的函数：

现场演示

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);