Question

我试图将类x和类y添加到角度服务/指令中的元素（它必须在脚本中，而不是通过ng-class）。序列是至关重要的 - 我希望首先添加x然后再添加y - 它需要2步。

我确信这会奏效：

$(element).addClass('x');
$timeout(function () {
  $(element).addClass('y');
},0)

但事实证明，有时候它并不一致，并且在x之前添加了y。我认为$timeout会改进两步 - 但我会问是否有另一种方法可以解决它。也许是一个＆＃39; onload＆＃39;或者＆＃39; onupdateClass＆＃39;关于DOM元素的事件，我不知道它是否存在？

澄清：如果最终它将是＆＃39; x y＆＃39;并不重要。或者＆＃39; y x＆＃39;。字符串顺序并不重要。重要的是序列：首先添加x，等待它添加，然后添加y

Answer 1

试试这样：

$(element).addClass('x');

if ($( element).hasClass('x')) {
     $(element).addClass('y');
}

Answer 2

如果您想在添加课程之间添加延迟，可以使用此示例中显示的queue()：https://stackoverflow.com/a/2510255/390421

Answer 3

以下function的想法是基于问题中显示的想法，但它会处理重复的setTimeout并使用有限的timeouts。如果添加了所有perequisite class，则此函数将classes和进程添加到下一个，并且如果尚未添加必要条件，则将其自身安排在稍后运行。但是，由于Javascript不是多线程的，我认为真正的问题是在添加y之前，x以某种方式添加到元素中。 console.log(element.hasClass(y))可能会帮助您。

function addClasses(element, classes, time, index, timeouts) {
    if (index === classes.length) {
        //All classes were added
        return;
    } else if ((index === 0) || (element.hasClass(classes[index - 1]))) {
        //Add the element and process to the next one
        element.addClass(classes[index++]);
        addClasses(element, classes, time, index, timeouts);
    } else {
        //If there are no more shots, then handle the error
        if (--timeouts === 0) {
            //handle error
            return;
        }
        //Schedule the function to run again
        setTimeout(function() {
            addClasses(element, classes, time, index, timeouts);
        }, time);
    }
}

然后你可以像这样使用function：

addClasses($(element), ["x", "y"], 10, 0, 10);

如何逐步向元素

3 个答案: