Javascript

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() 完成并创建新元素。

以时间轴的形式，当前发生的事情是：

呼叫.load()
查找并设置任何 .ticker-item 存在的元素的样式
从 .load()
创建新的 .ticker-item DOM 个元素

你想发生什么：

呼叫.load()
等到从 .load()
创建新的 .ticker-item DOM 个元素
查找并设置任何 .ticker-item 存在的元素的样式

正是您想要的：将您的格式化代码合并到一个函数中，然后在 .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);

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

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

html

jquery

css

reload