왜 코드가 setTimeout을 건너 뛰고 나중에 추월합니까?

Question

목표는 컨테이너 경계 내에서 임의의 위치에 div를 생성하고 3 초를 기다린 다음 div를 삭제하는 것입니다. 세 번 헹구고 반복하십시오. 그러나 결과는 setTimeout이 3 초를 기다리는 동안 코드가 '루프'를 계속 수행하고 3 초 후에 setTimeout 내부의 함수가 실행된다는 것입니다. 실수로 두 개의 스레드를 만들었습니까?

$(document).ready(function() { 
     var $bug = "<div class='bug'><div>"; 
     var x = 0; 

     var timer = setInterval(function() { 
      if (x > 3) { 
       clearInterval(timer); 
      } 
      r1 = Math.floor((Math.random() * 270) + 1); 
      r2 = Math.floor((Math.random() * 270) + 1); 
      $('#container').append("<div class='bug'style='top:" + r1 + "px;left:" + r2 + "px;'></div>") 
      x++; 

      setTimeout(function() { 
       $('.bug').remove(); 
      }, 3000) 

     }, 1000); 
    }); 

Answer 1

에 의해 최초의 버그를 제거 할 수 있습니다 이벤트 루프 및 javascript setTimeout 함수가 사실상 비 블로킹이며 비동기라고합니다. 당신은 타이머에서 타이머를 중첩하는 https://developer.mozilla.org/en/docs/Web/JavaScript/EventLoop

Answer 2

$('.bug').remove(); 

이 페이지에있는 모든 .bug을 제거합니다. 당신은 인덱스와 또 다른 클래스를 제공함으로써이 문제를 해결할 수 있습니다

$('#container').append("<div class='bug bug" + x + "'style='top:" + r1 + "px;left:" + r2 + "px;'></div>") 

그리고 당신은 내가 그것을 함께 할 수있는 뭔가를 가지고 생각

$('.bug.bug0').remove(); 

JS FIDDLE

Answer 3

및 타이머가 비동기 때문에 언제 무슨 일이 일어날 지 예측할 수 없습니다 :

을 참조하십시오. 귀하의 경우, 타이머의 중첩 된 특성은 폭주의 원인이됩니다.

실제로 실제로 setTimeout을 가질 필요는 없습니다.

것은 설명 주석을 참조하십시오 :

$(function() { 
 
    
 
    function insertRandom(){ 
 
    var r1 = Math.floor((Math.random() * 270) + 1); 
 
    var r2 = Math.floor((Math.random() * 270) + 1); 
 
    $('#container').append("<div class='bug' style='position: relative; top:" + 
 
          r1 + "px; left:" + r2 + "px;'>Test</div>") 
 
    } 
 
    
 
    // Insert the random element immediately 
 
    insertRandom(); 
 
    
 
    var x = 0; // counter for repetition 
 
    
 
    // Start code at a regular interval 
 
    var timer = setInterval(function() { 
 
    
 
     // If we're over the count 
 
     if (x >= 3) { 
 
     // Stop the code 
 
     clearInterval(timer); 
 
     
 
     // Terminate the function 
 
     return; 
 
     } 
 
     
 
     // Increment the count 
 
     x++; 
 

 
     // Take out the last inserted elmeent 
 
     $('.bug').remove(); 
 
     
 
     // Put a new element in 
 
     insertRandom(); 
 

 
    }, 3000); 
 
    
 

 
});

#container { border:1px solid black; width:300px; height:300px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>