1

我有以下 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 中调试代码时，我可以很清楚地看到元素在间隔变化。

我该如何解决？

任何帮助，将不胜感激。

4

3 回答 3

0

与 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;       
}
于 2013-05-09T08:33:08.550 回答
0

您可能最好使用 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);

});
于 2013-05-09T08:34:59.150 回答
0

感谢@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;
    }
于 2013-05-09T09:22:35.877 回答