用於循環的Javascript中的嵌套延遲

-1

我試圖編寫一個任務，其中受訪者必須能夠區分不同的類別。一個具體的例子是向受訪者展示多張照片，然後他們要求他們通過單擊空格鍵來識別與特定說明相匹配的所有照片。用於循環的Javascript中的嵌套延遲

我有8個「塊」，或其他8個不同類別的照片。（比如說，方塊1 =戴帽子的人，方塊2 =戴眼鏡的人等）。在每個區塊中，我會向被訪者展示20張照片，並要求他們識別與該區塊類別相匹配的所有照片。

困難的部分是，在這項任務中，我需要讓照片延遲一定的數量。具體來說，在每個塊的開始之前（即在每個塊中顯示第一張照片之前），我想顯示一張空白照片2秒鐘。然後塊開始。然後在每張照片之間，我會有1秒的時間間隔顯示空白的照片。我還想每張照片都顯示一秒鐘。因此，一個塊內，此過程會去：

1）照片1秒 2）1第二坯件照片 3）第二相片1秒鐘 4）1第二坯件相片

等我會在每個區塊爲20張照片做這個。我在實現照片間隔時遇到一些困難，以及獲取正確顯示照片的時間間隔。類似的代碼，我使用的是下面：

var total = 0; 
var i = 0; // block counter 
var locBlank = '.blankPhoto.jpg'; 
var stimulusInterval = 1000; 
var totalTime = stimulusInterval * 20; 
var interStimulusInterval = 1500; 
var j = -1; // counter within block 
function outer(){ 
    if (i++ < 8){ 
     block = blocks[i]; 
     blockPhotos = ... // code to get block photos 
     var loc; 
     inner(); 
     j = -1; 
    } 
    total += totalTime; 
    totalTime *= 2; // new 
    setTimeout(outer, total); 
} 

function inner(){ 
    if(j++ < 20){ 
     loc = blockPhotos[j]; 
     show_image(loc); // change image, then push results later 
      // code to record response here... 
    } 
    if(j < 20){ 
     setTimeout(inner, stimulusInterval); 
    } 
}

你可以看到試圖做到這一點使用遞歸函數，這是我計上心來從通過瀏覽相似的，所以問題。這段代碼也沒有實現我也需要做的照片之間的時間間隔。該代碼完成了我想要的第一個塊，但在該塊之後無法正常工作。我的意思是在第二個街區，照片之間的時間大約減半，然後在第二個街區之後沒有其他照片顯示。我最初嘗試在類似的方法中使用setTimeout嵌套for循環，但這也不起作用。

我正在尋找如何實現所有這些延遲的解決方案。

來源

2013-11-15 Josh W.

你有顯示的，到目前爲止，你做了什麼工作版本的jsfiddle？ – jameslafferty

時間有多重要 - 它可以是「1秒鐘」嗎？ –

這不是我可以在jsfiddle上發佈的內容，因爲這些照片本地存儲在我的電腦上，而且我無法將它們發佈到互聯網上。 –

我不會爲這種情況推薦遞歸，它只是一個簡單的迭代任務。像這樣的東西可以完成這項工作，對DoAction方法的第一部分發生的事情使用自己的想象力，以及您在actions陣列中需要的數據。

var actions = 
[ 
    { "action": "Photo 1", "duration": "2000" }, 
    { "action": "Photo 2", "duration": "2000" }, 
    { "action": "Blank", "duration": "1000" }, 
    { "action": "Photo 3", "duration": "2000" }, 
    { "action": "Photo 4", "duration": "2000" }, 
]; 

var actionIndex = 0; 

function DoAction(){ 
    $("#actionContainer").text(actions[actionIndex].action); 
    var delay = actions[actionIndex].duration; 
    actionIndex++; 
    if (actionIndex < actions.length) 
    { 
     setTimeout(DoAction, delay); 
    } 
} 

DoAction();

http://jsfiddle.net/r4yRV/

來源

2013-11-15 21:31:32 Snixtor

那是不是遞歸？ –

它從回調中重新輸入方法，而不是直接從方法中輸入。堆棧深度不會增加。 – Snixtor

像這樣的工作。謝謝！ –

用於循環的Javascript中的嵌套延遲

回答

相關問題