javascript - setInterval 没有添加 .addClass

Question

我有一个显示来自数据库的值的 CSS 选框。 x 分钟后，它会刷新并提取新数据。颜色根据它们的数值变化(如果 x < 50000 使其变为红色......等)。

我的问题是，一旦我的 setInterval 运行，数据就会更新，但不会添加颜色类。知道为什么吗？我看到这个post并将我的删除/添加类更改为切换，但这是同样的问题，初始运行后未调用切换。

Javascript

$(document).ready(function () {
    setColors();
    setInterval(function () { 
        $('.marquee').addClass("paused"); 
        $('.marquee').load('/Home/GetMarquee'); 
        setColors(); 
        $('.marquee').removeClass("paused"); 
    }, 30000);
});

function setColors() {
    $('.totalSales').each(function () {

        var final = $(this).text();

        //removes all the pervious classes
        $(this).removeClass('ok');
        $(this).removeClass('down');
        $(this).removeClass('up');

        if (final > 100000) {
            $(this).addClass('up');
        } else if (final < 50000) {
            $(this).addClass('down');
        } else {
            $(this).addClass('ok');
        }
    });
}

Razor HTML

<div class="marquee">
    <span>
        @for (var i = 0; i < Model.tickerData.Count(); i++)
        {
            <span class="totalSales">
                @Html.DisplayFor(x => x.tickerData[i].GroupName): @Html.DisplayFor(x => x.tickerData[i].Sales).....
            </span>
        }        
    </span>
</div>

CSS 颜色

.down {
    color:#AB2218;
}
.up {
    color: #4F692A;
}
.ok {
     color:#FABF03;
}

CSS 选框

.marquee {
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color:black;
    border: 1px black solid;
    font-size:50px;

    -webkit-animation: marquee 30s linear infinite alternate;
        animation: marquee 30s linear infinite;
}
.paused {
    animation-play-state: paused;
}

.marquee span {
    display: inline-block;
    text-indent: 0;
}


/* Make it move */
@keyframes marquee {
    0%   { text-indent: 17.5em }
    100% { text-indent: -57.5em }
}
@-webkit-keyframes marquee{
    0%   { text-indent: 17.5em }
    100% { text-indent: -57.5em }
}

Answer 1

.load 是一个异步 ajax 函数，因此它在完成之前不会阻塞，而且类的添加和删除发生得太快以至于无法注意到。尝试使用 .load 回调:

setInterval(function () { 
    $('.marquee').addClass("paused"); 
    $('.marquee').load('/Home/GetMarquee', function() { 
        setColors(); 
        $('.marquee').removeClass("paused");
    }); 
}, 30000);