javascript - 每隔一段时间更改对象类名不起作用

Question

我有以下 JavaScript 代码。这个想法是以 5 秒的间隔更改每个项目的 css 类。

function flahsActiveRules() {

        var list = document.getElementById('listName');
        var items = list.getElementsByTagName('li');

        for (var i = 0; i < items.length; ++i) {

            var li = items[i];
            changeColor(li, 'itemSortOrange');
        }
    }

    function changeColor(item, myCSS) {

        item.className = myCSS;
        sleep(5000);
    }

    function sleep(milliseconds) {
        var start = new Date().getTime();
        for (var i = 0; i < 1e7; i++) {
            if ((new Date().getTime() - start) > milliseconds) {
                break;
            }
        }
    }

这里的问题是，在 UI 方面，项目更改之间似乎没有任何延迟。所有这些似乎都是立即发生的，但是当我在 Chrome 中调试代码时，我可以很好地看到元素每隔一段时间就会发生变化。

如何解决这个问题？

如有任何帮助，我们将不胜感激。

Answer 1

与 C 等语言不同，JavaScript 中的代码是非阻塞的。

所以你不能通过编写很长的代码来产生延迟。

要生成延迟，您可以使用 setTimeout 或 setInterval 函数。

你能做的是。

function flahsActiveRules() {

    var list = document.getElementById('listName');
    var items = list.getElementsByTagName('li');

    for (var i = 0; i < items.length; ++i) {

        var li = items[i];
        setTimeout(function ()
        {
           changeColor(li, 'itemSortOrange');
        }, 5000 * i); 
    }
}

function changeColor(item, myCSS) {

    item.className = myCSS;       
}