Question

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

我使用'setInterval（）'实现了程序，每当有一个打开的插槽时，我会使用'.load（）'为广告加载模板，使用'.html将文本和图像更改为广告的文本和图像（）'和'.attr（“src”，...）'。

运行文件时，广告（现在只有一个）显示一秒钟（应该是4秒），然后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]);
    }
} );

在一个区间函数中jQuery更改为DOM不会粘贴

1 个答案: