我有100个数字的数组,我想向其中的20个添加活动类,这部分工作正常。但是我想在每个数字之间延迟。

我尝试使用settimeout,但一次只能将所有数字延迟5秒,但是我想将活动类一一设置为5秒。请帮忙。



function numbers() {

                        var activequantities;
                    activequantities = "@Html.DisplayFor(modelItem => item.Numbers)".split(",");
// this is array with sorted random numbers 20 of 100 example [22,33,46,57,etc]


                    function setClassNextItem(index)
{
    if (index >= activequantities.lenght) return;

    var value = activequantities[index];
    $(`.grid-container div[data-tabid=${value}]`).addClass('active');
    setTimeout(setClassNextItem(++index), 5000);
}

$(".grid-container div").removeClass('active');
                    setTimeout(setClassNextItem(0), 5000);



                }







<div class="grid-container">
        <div class="grid-item">

            <div class="grid-container2">
                <div class="grid-item2" data-tabid="1">1</div>
                <div class="grid-item2" data-tabid="2">2</div>
                <div class="grid-item2" data-tabid="3">3</div>
                <div class="grid-item2" data-tabid="4">4</div>
                </div>





依次添加活动的班级。每个数字之间有5秒的延迟。

最佳答案

尝试将activequantities转换为数字数组,然后执行以下操作:

function setClassNextItem(index)
{
    if (index >= activequantities.lenght) return;

    var value = activequantities[index];
    $(`.grid-container div[data-tabid=${value}]`).addClass('active');
    setTimeout(setClassNextItem(++index), 5000);
}

$(".grid-container div").removeClass('active');
setTimeout(setClassNextItem(0), 5000);

关于javascript - 为数组中的一个数字设置5秒超时,但不能一次全部超时,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58249900/

10-11 23:28
查看更多