Chrome和jQuery通過for-loop奇怪的問題多次追加（）通過for-loop

我有類似打字機的效果的代碼，其中段落拼寫出一個字母在一個短的時間延遲。它通過遍歷for循環並將每個字母附加到div來工作。這是一個奇怪的部分：如果切換標籤頁或在運行時儘量減少Chrome瀏覽器，它會混淆並打印亂碼，但如果您停留在正在運行的標籤上，它可以正常工作。在Firefox中，它可以正常工作，當您更改標籤頁時不會出現奇怪現象。到底是怎麼回事？這裏是我的代碼：Chrome和jQuery通過for-loop奇怪的問題多次追加（）通過for-loop

$(function() { 

var global_tw = "Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing."; 
var codeWordsFlag = false; 

function typewriter() { 
    var tw = global_tw.split(''); 

     for (i = 0; i <= tw.length; i++) { 
      delayPrint(i); 
     }; 


    function delayPrint(i) { 
     setTimeout(function(){ 
      $('.codeWords').append(tw[i]); 
     }, 75*i); //75 
    }; 
    codeWordsFlag = true; 
}; 
typewriter(); 
})

我還要提到，我試圖「追加」使用文本（）和HTML（）（例如，$（」碼字 '）文本（$（' 字。）。 text（）+ tw [i]）;），雖然這似乎減少了鉻的錯誤率，錯誤仍然發生在切換標籤/最小化時。

這裏的小提琴（嘗試一下，看看我的意思）：http://jsfiddle.net/Shambolaz/Xe56x/14/

感謝您的閱讀。

編輯：檢查邁克爾的答案，解決Chrome最小化時解決延遲超時調用的問題。

來源

2014-05-06 Ber

當選項卡爲後臺時，可能會延遲超時，導致這些超時無序執行。一個簡單的解決方法是始終激發前一個事件。也就是說，代替：

for (var i = 0; i < tw.length; ++i) { 
    delayPrint(i); 
}

...而不是做：

delayPrint(tw, 0);

...有：

function delayPrint(arr, index) { 
    if (index >= arr.length) { 
    return; 
    } 
    setTimeout(function() { 
    printElement(arr[index]); 
    delayPrint(arr, index+1); 
    }, 75); 
} 

function printElement(str) { 
    $('.codeWords').append(str); 
}

在這兩種情況下，你應該知道，時機不保證是......如果你想讓動畫看起來平滑，你應該知道自從上次調用以來經過了多少時間，並用它來確定在當前迭代中打印出多少個字符。

來源

2014-05-06 05:54:16

Rad，謝謝你。我實現了它，它的工作，感謝您的幫助。 – Ber

嘗試使用jQuery承諾打印出字母。因此每張照片都必須等待上一張照片才能完成。

現在我認爲問題是瀏覽器在前一個完成之前創建多個打印語句，然後隨機選取一個新創建的打印事件來運行。

讓我知道你是否需要一個代碼示例。 :) :)

來源

2014-05-06 06:11:48

謝謝你的另一個選擇，AJ。我已經得到了Michael的工作，但是聽起來好像使用promise（）也會起作用。 – Ber

沒問題。不客氣。 –

Chrome和jQuery通過for-loop奇怪的問題多次追加（）通過for-loop

回答

相關問題