.each循环中的setInterval或setTimeout

setInterval or setTimeout inside an .each loop

本文关键字：setTimeout setInterval 循环 each      更新时间：2023-09-26

这段代码将通过传递从XML文件中获取的参数来调用函数。一旦将参数传递给该函数，该函数将在DIV中写入内容。我遇到的问题是，函数应该每次写一次，每2秒才写一次。

这就是我到目前为止所做的，但不幸的是，函数是在同一时间被调用的，DIVs是在同一时间被编写的。看起来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>

Try

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);
    });
});

演示:恰好

相关文章：