It seems to work, but it does not work with setTimeout , it should circle the circle, please help. If you remove setTimeout it works.

 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>

  • Does he have to constantly spin? Or once? - Air
  • Generally constantly - recile 2:38 pm
  • setTimeout performs some action after some time. In this example, you need setInterval - Air
  • I need him, he has to go back to the loop - recile 2:42 pm

4 answers 4

Corrected some variables for example. In general, this is done through setInterval with a certain delay (100 ms. In your case). After a === 6.28 we again equate it to zero.

 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> 

     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> 

       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>

        In such cases, setTimeout replaces the loop.

        And in the function itself, after the rendering is done, the call to setrTimeout with the transfer of the function itself takes place and the parameter

         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>