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-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秒，它似乎会破坏几秒钟的格式化，但又会重新修复它，几乎就像它在等待其余函数的执行，然后再追上自己。

我说过，我是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的回答 正是你想要的：将你的格式化代码合并为一个函数，然后在 .load() 已经完成。

在学习JavaScript的过程中，你可以查看 Promises 和 asyncawait 也是。

---

EDIT

可能还有一个微妙的延迟 .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);