jQuery 对间隔函数内的 DOM 的更改不会坚持答案

【问题标题】：jQuery changes to DOM inside an interval function don't stickjQuery 对间隔函数内的 DOM 的更改不会坚持
【发布时间】：2016-12-18 22:46:56
【问题描述】：

我正在尝试构建一个广告系统，它每秒都会检查新的可用广告并仅在前一个广告已完成显示时才显示它们。（每个广告都有一个名为“时间”的属性，它指定它应该显示的秒数）

我使用“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() 来解决，因为我不希望在任何给定时间停止间隔。

非常感谢您的见解。

【问题讨论】：

标签： javascript jquery html dom

【解决方案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]);
    }
} );

【讨论】：