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

Javascript - conditional formatting breaks after element reload using ".load"

我是 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),请告诉我。

在此先感谢您的帮助。

如果你想一次又一次地完成它,你应该为此创建一个单独的函数。

加载函数在完成时会触发回调,您可以使用该回调再次重新格式化。


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);
});

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

以时间轴的形式,当前发生的事情是:

  1. 呼叫.load()
  2. 查找并设置任何 .ticker-item 存在的元素的样式
  3. .load()
  4. 收到的数据
  5. 创建新的 .ticker-item DOM 个元素

你想发生什么:

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

正是您想要的:将您的格式化代码合并到一个函数中,然后在 .load() 完成后将其作为回调函数调用.

随着学习的进步 JavaScript,请查看 Promisesasync/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);