Q:

Не выходит с setTimeout цикл

Вроде должно работать но не выходит с 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>

A:

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>

A:

Поправил некоторые переменные для примера. Вообще, это делается через 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>

