javascript - 从带有延迟的开关中断开 : setTimeout + break = syntax error

Question

我正在尝试制作一些依赖于 CSS 转换的动画，添加和删除类:(现在是一些代码，然后是一些进一步的解释)

/*variables are defined outside this function*/
function effect() {
    switch(activeWall.attr("animation-order")) {
        case "incremental":
            if(!j) { /*if first box*/
                boxes.eq(j).addClass("hovered");
                ++j;
                break;
            };

            if (j == defaultOrder.lenght) { /*if last box*/
                boxes.eq(j).removeClass("hovered");
                setTimeout(break, 1000); /*syntax error*/
            };

            /*any other*/
            boxes.eq(j).addClass("hovered");
            boxes.eq(j-1).removeClass("hovered");
            ++j;
            break;

        default:
            if(!i) { /*if first box*/
                boxes.eq(defaultOrder[i]).addClass("hovered");
                ++i;
                break;
            };

            if (i == defaultOrder.lenght) { /*if last box*/
                boxes.eq(defaultOrder[i]).removeClass("hovered");
                setTimeout(break, 1000); /*syntax error*/
            };

            /*any other*/
            boxes.eq(defaultOrder[i]).addClass("hovered");
            boxes.eq(defaultOrder[i-1]).removeClass("hovered");
            ++i;
            break;
    };
};

在hovered类中进行转换，以便用户在最后一个框的情况下看到它，在发生其他事情之前，我需要等待，然后使用a退出switch 中断。在删除类后放置像这样的 boxes.eq(i).removeClass("hovered").delay(n) 延迟将是无效的，因为下一个 jQuery 动画将应用于其他元素。我认为将 break 与 setTimeout 放在一起就可以了，但我收到语法错误。

那么，我如何才能暂停脚本流程以使转换生效所需的时间？我使用 setTimeout 是否不当？

Answer 1

您不能使用setTimeout()来调用break。

尝试以下更改:

请注意 length 的拼写，通常您应该与 length - 1 进行比较以获取最后一个元素的索引

if (j == (defaultOrder.length-1)) { /*if last box*/
  setTimeout((function() {
    var j_ = j; //keep j during timeout
    return function() {
      boxes.eq(j_).removeClass("hovered");
    };
  })(), 1000);
  break;
}

对default情况的修改如下:

if (i == (defaultOrder.length-1)) { /*if last box*/
  setTimeout((function() {
    var i_ = i; //keep i during timeout
    return function() {
      boxes.eq(defaultOrder[i_]).removeClass("hovered");
    };
  })(), 1000);
  break;
}