主页 / 问题 / 931622
Accepted
recile
Asked:2020-01-13 22:11:26 +0000 UTC2020-01-13 22:11:26 +0000 UTC

不退出 setTimeout 循环

  • 772

它似乎有效但不适用于setTimeout，圆圈应该绕一圈旋转，请帮助。如果您删除setTimeout 它，它会起作用。

var centerx = 400,
  centery = 450,
  radius = 150;
//var a=0;
function muvi(a) {


  while (a < 6.28) {

    a = a + 0.1;
    let x = (radius * Math.cos(a)) + centerx;
    let y = (radius * Math.sin(a)) + centery;
    console.log(a);
    let div = document.getElementById('roundid');
    div.style.left = x + "px";
    div.style.top = y + "px";
    document.body.appendChild(div);

    (function() {
      let j = a;
      setTimeout(function timer() {
        console.log(j);

      }, 100);
    })();

  }
}
muvi(0);
#block {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fcc;
}

body {
  position: relative;
}

.round,
#roundid {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}
<div id="roundid" class="round"></div>

javascript

4 个回答

  1. let div = document.getElementById('roundid');

function muvi() {

  (function() {
    var data = {
      radius: 50,
      speed: 20
    }
    var f = 0;
    var s = 2 * Math.PI / 180;
    setInterval(function() {
      f += s;
      div.style.left = 135 + data.radius * Math.sin(f) + 'px';
      div.style.top = 135 + data.radius * Math.cos(f) + 'px';
    }, data.speed)
  })()
}
muvi();
    #block {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fcc;
}

body {
  position: relative;
}

.round,
#roundid {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}
    <div id="roundid" class="round"></div>

    • 4
  2. Best Answer

    例如，更正了一些变量。通常，这是在setInterval一定的延迟（在您的情况下为 100 毫秒）之后完成的。在a === 6.28我们再次将其等同于零之后。

    var centerx = 80,
  centery = 80,
  radius = 50;

//var a=0;
function muvi(a) {


  var int = setInterval(() => {
    if (a > 6.28) {
      a = 0;
    }
    a = a + 0.1;
    let x = (radius * Math.cos(a)) + centerx;
    let y = (radius * Math.sin(a)) + centery;

    let div = document.getElementById('roundid');
    div.style.left = x + "px";
    div.style.top = y + "px";
    document.body.appendChild(div);
  }, 100);
}
muvi(0);
    #block {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fcc;
}

body {
  position: relative;
}

.round,
#roundid {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}
    <div id="roundid" class="round"></div>

    • 3 

  3. var centerx = 50,
    centery = 50,
    radius = 50;
var a=0;
    function loop() {
        a = a + 0.1;
        let x = (radius * Math.cos(a)) + centerx;
        let y = (radius * Math.sin(a)) + centery;
        let div = document.getElementById('roundid');
        div.style.left = x + "px";
        div.style.top = y + "px";
        document.body.appendChild(div);
    }
    setInterval(loop, 100)
    #block {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #fcc;
}

body {
    position: relative;
}

.round,
#roundid {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
}
    <div id="roundid" class="round"></div>

    • 2

  4. 在这种情况下，setTimeout 它会替换循环。

    而在函数本身中，渲染完成后，只是简单的调用setrTimeout了函数本身的调用，需要一个参数

    var centerx = 200,
  centery = 100,
  radius = 80;
//var a=0;
function muvi(a) {
  if (a >= 6.28) {
    a = 0;
  }
  let x = (radius * Math.cos(a)) + centerx;
  let y = (radius * Math.sin(a)) + centery;
  console.log(a);
  let div = document.getElementById('roundid');
  div.style.left = x + "px";
  div.style.top = y + "px";
  document.body.appendChild(div);

  setTimeout(muvi, 100, a + 0.1);
}
muvi(0);
    #block {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #fcc;
}

body {
  position: relative;
}

.round,
#roundid {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}
    <div id="roundid" class="round"></div>

    • 1

相关问题