Question

我正在尝试创建一个简单的拖动动画。点击按钮后汽车图像在页面上移动，直到每个到达某个位置。下面的代码适用于单击每次单击随机移动汽车的单击，但我想要一次单击以循环重复移动。我已经尝试将它放在引用x值的while循环中，但它不起作用。任何想法。

＆＃13;

<html>
<head>
  <meta charset="utf-8">
  <title>Race Car</title>
</head>
<body>
  <input type="button" id="move" value="race time" onClick="race()" />
  <div id="car" style="position: absolute; top: 150px"><img src="car.png"></div>
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  <script>
    //Get car position coordinates
    x = $("#car").offset().left;
    y = $("#car").offset().top;

    //Move car across screen by resetting car position coordinates
    var race = function() {
      var delay = 1000;

      setTimeout(function() {
        $("#car").css({
          left: x += Math.floor(Math.random() * 50),
          top: y
        });
        x = $("#car").offset().left;
      }, delay);
    };
  </script>
</body>

</html>

＆＃13;

Answer 1

您正在寻找setInterval。

setTimeout在x毫秒后运行一次函数。

setInterval每隔x毫秒运行一次函数。

请务必将时间间隔存储在您可以访问的变量（var timer = setInterval(fn, ms)）中，然后在想要停止间隔时清除它（clearInterval(timer)）。

Answer 2

为什么使用变量而不是标准函数？无论如何，您可以在setTimeout函数内递归调用函数，直到满足条件。试试这个：

＆＃13;

<html>

<head>
  <meta charset="utf-8">
  <title>Race Car</title>
</head>

<body>
  <input type="button" id="move" value="race time" onClick="race()" />
  <div id="car" style="position: absolute; top: 150px"><img src="car.png"></div>
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  <script>
    //Get car position coordinates
    x = $("#car").offset().left;
    y = $("#car").offset().top;

    //Move car across screen by resetting car position coordinates
    function race() {
      var delay = 1000;

      setTimeout(function() {
        $("#car").css({
          left: x += Math.floor(Math.random() * 50),
          top: y
        });
        if (x < 200) //Specify where you want the movement to end.
          race();
      }, delay);
    }
  </script>
</body>

</html>

＆＃13;

Answer 3

你应该使用递归的setTimeout（）而不是 setInterval（）。

在此处查看原因 - ＆gt; https://develoger.com/settimeout-vs-setinterval-cff85142555b

这就是我喜欢解决这个问题的方法，使用下面的函数，你可以传递迭代次数，中间时间和实际回调。

多少次？（你可以设置无穷大）
延迟多少（以秒为单位）
要做什么？

请参阅此处的工作示例 - ＆gt; https://jsfiddle.net/nmitic/bbr6y2a4/

const repeat = (numberOfIterations, timeBetweenItereation, stuffToRepeat) => {
  let iterationCounter = 0;
  const repeater = () => {
    setTimeout( () => {
       stuffToRepeat();
       iterationCounter++;
       if (iterationCounter >= numberOfIterations && numberOfIterations 
       !== Infinity)  {
        return;
       };
       if (iterationCounter >= numberOfIterations) {
          return;
       };
       repeater(); 
    }, 1000 * timeBetweenItereation);
  };
  repeater();
};

Answer 4

每当您点击按钮并且比赛从开始时开始，这将清除间隔。也无需在每次通话时设置top，只需left即可。快乐赛车!!!

＆＃13;

x = $("#car").offset().left;
y = $("#car").offset().top;

//Move car across screen by resetting car position coordinates
var interval;
var race = function() {
  clearInterval(interval);
  var delay = 100, x=0;
  interval = setInterval(function() {
    $("#car").css({
      left: x += Math.floor(Math.random() * 50),
    });
    x = $("#car").offset().left;
  }, delay);
};

＆＃13;

<input type="button" id="move" value="race time" onClick="race()" />
<div id="car" style="position: absolute; top: 150px"><img src="car.jpg"></div>

＆＃13;

循环代码延迟

4 个答案: