Javascript jQuery在区间函数don'；t棒

我正在尝试建立一个广告系统，它每秒钟都会检查新的可用广告，并且只有在前一个广告已经显示完毕的情况下才会显示它们。（每个广告都有一个名为“时间”的属性，该属性指定了广告应显示的秒数）

我使用“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);
});

$（文档）.ready（函数（）{
var迭代器=0；
var计数=1；
setInterval（函数（）{
计数--；
var infiniteLoopPreventor=playlist.length；
虽然（InfiniteLopPreventor>0&&count==0）{//确保没有无限循环，也没有显示以前的消息
var now=新日期（）；
var currentMsg=播放列表[迭代器]；
for（currentMsg.timeSets中的var时间集）{
如果（currentMsg.timeSets[timeSet].startDate.getTime（）=now.getTime（））&&
currentMsg.timeSets[timeSet].days[now.getDay（）]==1&&
currentMsg.timeSets[timeSet].startTime=now.getHours（）{
//显示消息
$（“#结果”）.load（currentMsg.template）；
for（currentMsg.text中的var txt）{
$（“div#“+txt）.html（currentMsg.text[txt]）；
}
for（currentMsg.images中的var img）{
$（“img#“+img.attr”（“src”，currentmg.images[img]）；
}
count=currentMsg.time；
break；//来自在时间集上迭代的for循环。
}   
}
迭代器=（迭代器+1）%playlist.length；
无穷无尽的复仇者；
}
}, 1000);
});

滚动浏览有关类似问题的帖子，一些关于为什么会发生这种情况的建议，但没有提供适当的解决方案。拟议的原因是： -更改不会持续，因为html是从另一个页面加载的。 -异步函数。 -间隔的问题，可以通过使用clearInterval（）解决，它不适合我的问题，因为我不希望在任何给定时间停止间隔

---

非常感谢您的见解。

我终于找到了解决方案

由于某种原因，.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]);
    }
} );