지연 JavaScript 함수 실행

Question

반복마다 매개 변수가있는 함수를 호출하는 JQuery의 .each 루프가 있습니다.이 함수 호출을 지연시키는 방법이 있습니까? 다음과 같이 setTimeout 시도했지만 함수가 즉시 실행 되면이 작동하지 않습니다.

$.each(myArray, function (j, dataitem) 
{ 
    setTimeout(function() { showDetails(dataitem) }, 300); 
}); 

function showDetails(dataitem) 
{ 
... 
} 

배열의 크기는 약 20, 내가 할 노력하고있어 대신 즉시 일정 기간 동안 함수 호출을 배포하는 것입니다 것입니다, 어떤 생각이 어떻게 이것을 달성하기 위해? 필자는이 기능을 수행하기 위해 함수를 호출하는 방법을 다시 작성하고 재구성 할 준비가되었습니다.

Answer 1

당신은 동적으로 간격을 계산하는 배열의 인덱스를 사용할 수 있습니다 : 그냥 $.each를 사용하지 않는

$.each(myArray, function (j, dataitem) { 
    window.setTimeout(function() { 
     showDetails(dataitem) 
    }, (j + 1) * 300); 
}); 

Answer 2

모두을 300 밀리 초 후에 실행합니다.

window.setTimeout(function() { showDetails(dataitem) }, (j + 1) * 300); 

편집 : 대신에, 이런 식으로 뭔가를 시도하는 대신 내가 그것을 하나 하나를 수행하는 것이 좋습니다 생각 한 번에 20 개 타이머를 만드는. 기능은 다음과 같아야합니다

function showDetails(index) 
{ 
    if (index >= myArray.length) 
     return false; 
    var dataItem = myArray[index]; 
    //code here...... 
    //code here...... 
    //code here...... 
    windows.setTimeout(function() { showDetails(index + 1); }, 300); 
} 

그리고 첫 번째 호출 될 수 있습니다

$(document).ready(function() { 
{ 
    showDetails(0); 
}); 

이 myArray 일반 전역 배열 가정, 하나 개의 아이템을 취급하고 다음 지연 다음 항목을 호출합니다.

Answer 3

jQuery.queue([ queueName ], callback(next))을 살펴보십시오. 이렇게하면 호출 할 수있는 함수를 대기시킬 수 있으며 jQuery의 애니메이션 효과가 내부적으로 사용하는 것입니다.

대기열을 구현하려는 것처럼 들리 겠지만 의도는 분명하지 않습니다.

편집 : 귀하의 질문을 다시 읽고, 나는 다른 답변을 당신이 무엇을 더 일치하는 것 같아요,하지만 어떻게 지연된 함수 실행을 달성하기 위해 사용자 지정 큐를 보여줄 것이라고 생각했다.

example of how you could use a queue.

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], 
    output = $('#output'); 

// set the queue up 
$.each(myArray, function (j, dataitem) { 
    output.queue('queue', function(next) { 
     var that = this; 
     showDetails(dataitem); 
     window.setTimeout(next,300); 
    }); 
}); 

// start the queue running. 
output.dequeue('queue'); 

function showDetails(dataitem) { 
    output.append('<div>' + dataitem + '</div>'); 
} 

Answer 4

,하지만 뭔가 같은 :

var data = [1, 2, 3, 4, 5]; 

function showDetails(values, delay) { 
    console.log(values.shift()); //show the value 
    if (values.length) { 
    setTimeout(function() {showDetails(values, delay); }, delay); //schedule next elem 
    } 
} 

showDetails(data.slice(0), 300); //dont forget the slice, call-by-reference