javascript - jQuery 在间隔函数内对 DOM 的更改不会保留

Question

我正在尝试构建一个广告系统，它每秒检查一次可用的新广告，并仅在前一个广告显示完毕后才显示这些广告。 (每个广告都有一个名为“时间”的属性，用于指定应显示的秒数)

我使用“setInterval()”实现了该程序，只要有空位，我就会使用“.load()”加载广告模板，使用“.html”将文本和图像更改为广告的文本和图像()' 和 '.attr("src",...)'。

运行文件时，广告(目前只有一个)显示一秒钟(应该是四秒钟)，然后 DOM 恢复为“template.html”中的原始文本和图像。此操作会无限执行，而每四秒广告会显示一次，短暂一瞥，然后恢复 DOM。

我在这里阅读了很多关于类似问题的帖子，但没有一个提供针对这个特定问题的解决方案。

这是存储广告对象的播放列表:

{name: "msg1",
 texts: {txt1: "First ad!",
         txt2: "Come and buy our product!",
         txt3: "It's top secret...",
         txt4: "So it has to be good ;)"},
 images: {img1: "./topSecret.png",
          img2: "http://in5d.com/wp-content/uploads/2015/03/zdhstrrst.jpg"}}

这是使用 jQuery 在一个时间间隔内发生的 DOM 变化:

$(document).ready(function(){
    var iterator = 0;
    var count = 1;
    setInterval(function(){
        count--;
        var infiniteLoopPreventor = playlist.length;
        while(infiniteLoopPreventor >0 && count == 0){ //make sure no infinite loop and no previous msg is being displayed
            var now = new Date();
            var currentMsg = playlist[iterator];
            for(var timeSet in currentMsg.timeSets){
                if(currentMsg.timeSets[timeSet].startDate.getTime()<=now.getTime() &&
                    currentMsg.timeSets[timeSet].endDate.getTime()>=now.getTime() &&
                currentMsg.timeSets[timeSet].days[now.getDay()] == 1 &&
                currentMsg.timeSets[timeSet].startTime<=now.getHours() &&
                currentMsg.timeSets[timeSet].endTime>=now.getHours()){
                    //display message
                $( "#result" ).load( currentMsg.template );
                for(var txt in currentMsg.texts){
                    $( "div#"+txt ).html(currentMsg.texts[txt]);
                }
                for(var img in currentMsg.images){
                    $( "img#"+img ).attr("src", currentMsg.images[img]);
                }
                count = currentMsg.time;
                break; //from the for loop which iterates over time sets.
            }   
        }
        iterator = ( iterator + 1 ) % playlist.length;
        infiniteLoopPreventor--;
    }
}, 1000);
});

滚动浏览询问类似问题的帖子，就出现问题的原因提出了一些建议，但没有提供适当的解决方案。提议的原因是: - 更改不会保留，因为 html 是从另一个页面加载的。 - 异步函数。 - 间隔问题，可以通过使用不适合我的问题的 clearInterval() 来解决，因为我不希望在任何给定时间停止间隔。

非常感谢您的见解。

Answer 1

我终于找到了解决办法!

问题出在 .html() 和 .attr() 上。

我更改了代码，以便将它们作为 .load() 回调函数的一部分执行并且它起作用了。

我仍然希望能解释为什么旧版本不起作用。同时，这是新的代码:

$( "#result" ).load( currentMsg.template, function(){
    for(var txt in currentMsg.texts){
        $("div#"+txt ).html(currentMsg.texts[txt]);
    }
    for(var img in currentMsg.images){
        $( "img#"+img ).attr("src", currentMsg.images[img]);
    }
} );