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

Question

我对 JavaScript / JQuery 非常陌生，并且对应该是一个简单的条件格式化函数有一些问题。在初始页面加载时，条件格式功能本身可以正常工作；但是，在执行设置为每 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-items 在 #top-bar 元素内，而 carousel-items 不在，所以对我来说很明显问题出在 #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 秒，它似乎会破坏格式几秒钟但然后再次修复它，就好像它正在等待其余的在赶上自己之前要执行的函数。

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

如果您需要其他任何内容（例如 HTML），请告诉我。

提前感谢您的帮助。

Answer 1

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

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

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() 时，需要花费一些时间来获取新数据并将元素插入 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' answer 正是您想要的：将您的格式化代码合并到一个函数中，然后在 .load() 完成后将其作为回调函数调用。

随着您学习 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);