Javascript - 使用“.load”重新加载元素后条件格式中断

Question

我对 JavaScript / JQuery 非常陌生，并且对应该是简单的条件格式 function 有一些问题。 条件格式 function 本身在初始页面加载时工作正常； 但是，在执行设置为每 60 秒运行一次的元素重新加载后，它会再次破坏条件格式。

这是 JavaScript：

$(document).ready(function(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
    });

var refreshTickers = setInterval(function () {
    $("#top-bar").load(location.href+" #top-bar>*","");
}, 60000);

可能值得一提的是，只有在元素重新加载后出现问题的ticker-item格式。 carousel-item格式工作正常。 ticker-item在#top-bar元素内，而carousel-item不在，所以对我来说很明显问题出在#top-bar元素内，这是重新加载的结果。

我也试过下面的代码，但无济于事：

$(document).ready(function(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');    
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
    });

var refreshTickers = setInterval(function () {
    $("#top-bar").load(location.href+" #top-bar>*","");
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
}, 60000);

更奇怪的是，使用此代码，如果我将重新加载的间隔更改为 10 秒，它似乎会破坏格式几秒钟但然后再次修复它，几乎就像它正在等待 function 的 rest 到在赶上自己之前执行。

正如我所说，我是 JS 新手，我到处寻找解决方案。 难道我做错了什么？

如果您需要其他任何东西（即 HTML），请告诉我。

在此先感谢您的帮助。

Answer 1

如果您希望它一次又一次地完成，您应该为此创建一个单独的 function 。

并且加载 function 将在完成时触发回调，您可以使用该回调重新格式化它。

function reFormat(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
}

$(document).ready(function(){
   reFormat();

    var refreshTickers = setInterval(function () {
        $("#top-bar").load(location.href+" #top-bar>*", function(){
            reFormat();
        });
    }, 60000);
});

Answer 2

当您执行.load()时，go 需要一些时间来获取新数据并将元素插入 DOM。 但是，随后的 Javascript 代码不知道它应该等到.load()完成并创建新元素。

以时间线形式，目前正在发生的事情是：

1. 调用.load()
2. 查找存在的任何.ticker-item元素并为其设置样式
3. 从.load()收到的数据
4. 创建新.ticker-item DOM 元素

你想要发生的事情：

1. 调用.load()
2. 等到从.load()收到数据
3. 创建新.ticker-item DOM 元素
4. 查找存在的任何.ticker-item元素并为其设置样式

Anees 的答案正是您想要的：将您的格式化代码合并到一个 function 中，然后在 .load .load()完成后将其作为回调 function 调用。

随着您学习 JavaScript 的进展，请同时查看Promises和async / await 。

---

编辑：

在.load()完成和 DOM 中存在的那些元素之间可能仍然存在细微的延迟。

找出是否是这种情况的一种方法是在回调中调用reFormat()之前添加延迟：

var elementCreationDelay = 500; // experiment with this duration

var refreshTickers = setInterval(function () {
  $("#top-bar").load(location.href+" #top-bar>*", function(){
    setTimeout(reFormat, elementCreationDelay);
}, 60000);