Question

我正在使用一些代码在页面加载时突出显示特定元素一小段时间（假设在url参数中传递了特定参数）。

代码有一个起始颜色，然后迭代回到白色。

完成后我想再次设置背景颜色。（或删除创建的内联样式属性）。

似乎正在发生的事情是，在迭代完成之前执行进行最终颜色更改的代码。

我尝试使用承诺，deffering等但没有运气。我最近的尝试是将迭代代码移动到一个单独的JS文件中，并通过AJAX调用它并将最后一个颜色更改为完成该调用。即便在迭代完成之前触发代码！谁能帮忙？这是我的代码：

代码发光我div的背景:(在flashfaq.js中保存）

function a() {
        $('.faqTitle').first().css('backgroundColor', 'hsl(45,100%,50%');
        var d = 10;
        for (var i = 50; i <= 100; i = i + 0.1) {
            d += 5;
            (function(ii, dd) {
                setTimeout(function() {
                    $('.faqTitle').first().css('backgroundColor', 'hsl(45,100%,' + ii + '%)');
                }, dd);
            })(i, d);
        };

    }

AJAX称之为：

    function showSpecificFaq() {
        $.ajax({
            async: false,
            type: "GET",
            url: "/../scripts/flashFAQ.js",
            dataType: "script",
            complete: function(data) {
                 $('.faqTitle').first().css('backgroundColor', '');
            }
        });
    }

我在想，只有flashFAQ中的代码完成后才会触发完整，但它似乎不会发生这种情况。

Answer 1

我认为，创造如此多的计时器并不利于提高性能。我更改了脚本，因此有一个函数可以改变颜色一次，并使用下一个颜色安排自己的调用。达到最终颜色后，它会恢复初始颜色并停止超时。

changeColor(50);

function changeColor(l){
    if (l > 100) {
        //a condition that terminates the cycle and restores original color
        $('.faqTitle').css('backgroundColor', '#f00');
    } else {        
        $('.faqTitle').css('backgroundColor', 'hsl(45,100%,' + l + '%)');
        //scheduling next change
        setTimeout(function(){
            changeColor(l + 1);
        }, 100);
    }   
}

工作示例：http://jsfiddle.net/GHrKN/

这就是你通常可以使用超时循环的方法。对于样式动画，JQuery具有animate功能。我对此并不熟悉，但我认为你可以在这里使用它

make jquery在继续之前等待for循环的完成

1 个答案: