for 루프의 업데이트 값 지연

내 웹 페이지에서 가격을 업데이트하고 싶습니다.
내가 현재 가지고있는 내 루프의 경우는 가격이 위쪽으로 반복 볼 수 있도록

for 루프의 업데이트 값 지연

$(document).ready(function() { 
     $("#table1").fadeIn(1000, function myLoop() 
     { 
     var price = 60; 

     for (var i = 0; i <= price; i++) { 
       $("#price").html("€" + i);    
      } 
     });  
    });

난에 지연이 필요합니다.
도움을 주신 데 대해 감사드립니다.

출처

2014-07-19 Nick Prozee

, 당신은 당신의 코드에서 지연을 넣지 마십시오; 대신에 환경으로 돌아와 잠시 후에 다시 전화하도록 요청하십시오.

브라우저에서 setTimeout (일회용) 또는 setInterval (계속 반복되는 타이머 용)을 사용하여 브라우저를 수행 할 수 있습니다. 지금하고있는 일에 대해서는 setTimeout을 사용하고 필요에 따라 새로운 반복 일정을 계획합니다. 여기

는 예제 :이

$(document).ready(function() { 
    $("#table1").fadeIn(1000, function myLoop() 
    { 
     var price = 60; 
     var i = 0; 

     loop(); 

     function loop() 
     { 
      $("#price").html("€" + i);    
      if (i < price) { 
       ++i; 
       setTimeout(loop, 100); // 100ms = 1/10th second 
      } 
     } 
    });  
});

, 우리는 i 미만 price 경우, i 다음 0 인 그리고 가격을 업데이트 loop를 호출하고 시작에서 다시 호출 브라우저 요청 100ms (10 분의 1 초). 이 경우 업데이트 된 i 값을 표시 한 다음 i이 더 이상 price보다 작아 질 때까지 프로세스를 반복합니다.

loop (이것은 처음 loop 실행 후 않는)에 fadeIn 콜백 복귀 후에도이 그 변수 지속적인 참조했음을 의미 i 및 price 위에 폐쇄이기 때문에이 작동한다. Closures are not complicated이

출처

2014-07-19 16:36:45

function increasePrice(i, max) { 
    setTimeout(function() { 
     $("#price").html("€" + i); 
     i++; 
     if (i <= max) { 
      increasePrice(i, max); 
     } 
    }, 20); 
} 

increasePrice(0, 200);

이렇게하면 20 밀리 초마다 반복됩니다.

데모 : 웹 프로그래밍과 같은 이벤트 중심의 환경에서 http://jsfiddle.net/robschmuecker/78cWu/

출처

2014-07-19 16:35:19

내가 setInterval로,이처럼 작성합니다 :

여기

function Start() { 

    setInterval(SetPrice, 500); 
} 

function SetPrice() { 

    var ThePrice = $('#ThePrice').text(); 

    ThePrice = (ThePrice.length) ? parseInt(ThePrice, 10) : 0; 

    ThePrice = ThePrice + 1; 

    $('#ThePrice').hide() 
     .text(ThePrice) 
     .fadeIn(300); 

    if (ThePrice === 60) { 

     clearInterval(SetPrice); 
    } 
} 

$(Start);

그것은 훨씬 terser이 될 수 있지만, 나는 왼쪽 jsFiddle

이다 (내 블로그) 폐쇄 에 대한 자세한 그것은 명확성을 위해 그렇게합니다.

출처

2014-07-19 16:40:40 frenchie

<html> 
    <head> 
     <title>Price</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    </head> 
    <body> 
<script> 
    $(document).ready(function() { 
     $("#table1").fadeIn(1000, function myLoop() { 
      var price = 60, 
       i = 0, 
       priceTag = $('#price'), 
       inter = setInterval(function() { 
        if (++i >= price) { 
         clearInterval(inter); 
        } 
        priceTag.html("€" + i); 
       }, 200); 
     }) 
    }); 
</script> 
<div id="table1"> 
    <div id="price">10</div> 
</div> 
    </body> 
</html>

출처

2014-07-19 16:42:33

for 루프의 업데이트 값 지연

답변

관련 문제