함수가 완료 될 때까지 스크립트를 일시 중지합니다. - jquery

Question

간단한 입력 기능을 사용하여 숫자를 입력 필드로 증가시킵니다. 이것은 정확하게 작동하는 방식으로 작동합니다. 유일한 문제는 다중 함수가있는 긴 JS 스크립트가 있고 count() 함수가 완료되면 스크립트가 계속 실행되기를 원합니다.

JSFIDDLE 설계에 의한에서는 setTimeout 그래서 그냥 당신이 당신의 코드가 처리를 계속하고 준비가되면 다시의 setTimeout 코드를 제공 할 수 있습니다를 호출하여 비동기 적으로 실행http://jsfiddle.net/vyN6V/243/

var number = 1500; 
var aValue = 300; 

function count(Item) { 
    var current = aValue; 
    Item.val(aValue += 1); 
    if (current < number) { 
     setTimeout(function() { 
      count(Item) 
     }, 0.1); 
    } 
} 

count($(".input")); 

// the rest of the script should only run when the above function has completed 

$('span').text('code here should only run when function count is complete'); 

Answer 1

필요한 것은 콜백입니다. 예를 들어 jQuery에서 콜백을 사용했다고 확신합니다. 비동기 처리의 필요가

function count(Item, Callback) { // new argument 
    var current = aValue; 
    Item.val(aValue += 1); 
    if (current < number) { 
     setTimeout(function() { 
      count(Item, Callback) // pass it in recursive calls 
     }, 0.1); 
    } else { 
     Callback();     // call it at the end of the loop 
    } 
} 

count($(".input"), function() {  // write the callback code here 
    // this will be executed after the counts 
}); 

Answer 2

는 (당신이하지 않을 때 결정).

JavaScript에서이를 수행하려면 카운트 기능이 완료 될 때까지 호출하지 않는 함수에 나머지 코드를 캡슐화해야합니다.

왜 이런 식으로 setTimeout을 사용하고 있는지 물어볼 수 있습니까? 그것은 당신이 원하는 것은 실제로 동기 함수이므로 단순히 count() 함수에서 일반적인 while 문을 사용하지 않는 이유는 무엇입니까?

Answer 3

당신이 그것을 필요로 할 때, 콜백 함수 restFunctionCalled()를 호출 : 여기

는 코드에 추가하는 방법입니다. 이 같은.

var number = 1500; 
var aValue = 300; 

function count(Item) { 
    var current = aValue; 
    Item.val(aValue += 1); 
    if (current < number) { 
     setTimeout(function() { 
      count(Item) 
     }, 0.1); 
    }else{ 
     restFunctionCalled(); //invoke the callback function from here. 
    } 
} 

count($(".input")); 

function restFunctionCalled(){ 
    $('span').text('code here should only run when function count is complete'); 
} 

DEMO

Answer 4

이 시도 : http://jsfiddle.net/aamir/vyN6V/248/

var number = 1500; 
var aValue = 300; 

function count(Item) { 
    var current = aValue; 
    Item.val(aValue += 1); 
    if (current < number) { 
     setTimeout(function() { 
      count(Item) 
     }, 0.1); 
    } else { 
     callback(); 
    } 
} 

count($(".input")); 

function callback() { 
    $('span').text('code here should only run when function count is complete'); 
} 

Answer 5

을 당신이 비동기 호출을 제거 할 수 있습니다 : 당신이 잠을 시뮬레이션 또는 대한

var number = 1500; 
var aValue = 300; 

function count(Item) { 
    var current = aValue; 
    while(current <= number){ 
     Item.val(aValue += 1); 
     current = aValue; 

    } 
} 

count($(".input")); 

Answer 6

var number = 1500; 
    var aValue = 300; 
    function count(Item) { 
      var current = aValue; 
      Item.val(aValue += 1); 
      if (current < number) { 
       setTimeout(function() { 
        count(Item) 
       }, 0.1); 
      } 
      if (current == number) { 
       $('span').text('code here should only run when function count is complete'); 
      } 
     } 

     count($(".input")); 

Answer 7

두 가지 옵션이 있습니다를 캡슐에 넣다 코드의 나머지 부분은 함수가 끝나면 호출합니다 (두 번째 옵션을 사용하는 것이 좋습니다).

function sleep(milliSeconds){ 
var startTime = new Date().getTime(); // get the current time 
while (new Date().getTime() < startTime + milliSeconds); // hog cpu 
} 

또는

function callFunction(){ 
    $('span').text('code here should only run when function count is complete'); 
} 

if (current < number) { 
    setTimeout(function() { 
     count(Item) 
    }, 0.1); 
} 
else{ 
    callFunction() 
}