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

Answer 2

您可能最好使用JavaScript函数setInterval。

我在这里放了一个小演示http://jsfiddle.net/mDW56/这个演示包含jQuery，所以只要你不反对使用它：）

$(function(){

    // get the items using jQuery
    var items = $('li');

    // set your starting index
    var index = 0;

    // create a variable which holds the id of the interval so you can clear it later            
    var i = setInterval(function(){

        // log some info. remove this when not debugging
        console.log('interval start. index value: ', index);

        // if the index is less than the length of the array
        if ( index <= items.length - 1 ){

            // get the li using jquery and the index. then add a class
            $(items[index]).addClass('item');
            // increment the index
            index ++;
        }
        else{
            // index greater than the items so clear the interval
            window.clearInterval(i);
            console.log('interval stop');
        }

    }, 5000);

});

Answer 3

感谢@Arun P Johny，这是解决我问题的方法。

http://jsfiddle.net/arunpjohny/Sun3c/

以下是jsfiddle中列出的JavaScript：

function flahsActiveRules() {

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

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

            (function (i) {
                setTimeout(function () {
                    if (i > 0) {
                        changeColor(items[i - 1], '');
                    }

                    changeColor(items[i], 'itemSortOrange');

                    if (i == items.length - 1) {
                        setTimeout(function () {
                            changeColor(items[items.length - 1], '');
                            flahsActiveRules();
                        }, 1000)
                    }
                }, i * 1000)
            })(i);
        }
    }


    function changeColor(item, myCSS) {

        item.className = myCSS;
    }

更改对象classNames的间隔不起作用

3 个答案: