.each循環內的setInterval或setTimeout

Question

我有這段代碼，通過傳遞從XML文件獲取的參數來調用函數。 一旦將參數傳遞給函數，此函數將把內容寫入DIV。 我遇到的問題是該函數每次只能寫入一次，並且只能每2秒寫入一次。

到目前為止，這是我所做的，但是不幸的是，該函數是同時調用的，並且DIV是同時編寫的。 看起來setInterval無法正常工作：

每個XML數據每2秒調用一次的函數是：

obj = $('#cvd_bubble_left').append(makeCvdBubbleAnimator(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
    obj.fitText(7.4);

整個代碼是：

var tocURL = "../broadcasted.xml";
$.get(tocURL, function(d) {
    $(d).find('tweet').each(function() {
        var cvdIndexId = $(this).find("index");
        var cvdTweetAuthor = $(this).find("author").text();
        var cvdTweetDescription = $(this).find("description").text();
        setInterval(function() {
            if (cvdTweetAuthor === "Animator") {
                obj = $('#cvd_bubble_left').append(makeCvdBubbleAnimator(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
                obj.fitText(7.4);
            } else {
                obj = $('#cvd_bubble_right').append(makeCvdBubble(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
                obj.fitText(7.4);
            }
        }, 2000);
    });
});

xml代碼是：

<?xml version="1.0" encoding="UTF-8"?>
<root bubbles="6">
    <tweet broadcasted="bubble">
        <author><![CDATA[@Liciiious]]></author>
        <description><![CDATA[#EveryoneLovesBeinsport (cc @beinsport @charlesbietry). #pureLIVE]]></description>
        <index>1</index>
    </tweet>
    <tweet broadcasted="bubble">
        <description><![CDATA[Message]]></description>
        <author><![CDATA[beIN Sport]]></author>
        <index>2</index>
    </tweet>
        <tweet broadcasted="bubble">
        <author><![CDATA[@Liciiious2]]></author>
        <description><![CDATA[#EveryoneLovesBeinsport (cc @beinsport @charlesbietry). #pureLIVE]]></description>
        <index>3</index>
    </tweet>
    <tweet broadcasted="bubble">
        <description><![CDATA[Message]]></description>
        <author><![CDATA[Animator]]></author>
        <index>4</index>
    </tweet>
        <tweet broadcasted="bubble">
        <author><![CDATA[@MAuricious]]></author>
        <description><![CDATA[#EveryoneLovesBeinsport (cc @beinsport @charlesbietry). #pureLIVE]]></description>
        <index>5</index>
    </tweet>
    <tweet broadcasted="bubble">
        <description><![CDATA[Message]]></description>
        <author><![CDATA[beIN Sport]]></author>
        <index>6</index>
    </tweet>
</root>

Answer 1

嘗試

var tocURL = "../broadcasted.xml";
$.get(tocURL, function(d) {
    $(d).find('tweet').each(function(index) {
        var cvdIndexId = $(this).find("index");
        var cvdTweetAuthor = $(this).find("author").text();
        var cvdTweetDescription = $(this).find("description").text();
        setTimeout(function() {
            if (cvdTweetAuthor === "Animator") {
                obj = $('#cvd_bubble_left').append(makeCvdBubbleAnimator(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
                obj.fitText(7.4);
            } else {
                obj = $('#cvd_bubble_right').append(makeCvdBubble(cvdIndexId, cvdTweetAuthor, cvdTweetDescription));
                obj.fitText(7.4);
            }
        }, index * 2000);
    });
});

演示： 柱塞