setInterval函數中的onClick切換類

Question

setInterval(function () {
$("#bound").click(function () {
    $(".top").toggleClass("one");
    $(".middle").toggleClass("two");
    $(".bottom").toggleClass("three");
    $(".nav-menu").toggleClass("menu-show");
});}, 450);

怎么了 過渡滯后太多，有時會停止工作。

Answer 1

怎么了

問題是您以450毫秒的間隔綁定了許多click事件，這將導致瀏覽器消耗大量內存，並且瀏覽器最終將無響應。

其他值得注意的是，您將獲得綁定事件的數量“ n”。 因此，由於它是一個連續的過程，因此在每次迭代時它將綁定一個事件，意味着如果執行兩次迭代，則執行兩次回調。

我想您可能會這樣做：

$("#bound").click(function () {
    setTimeout(function () { // <------change it to setTimeout if u don't make it infinite
        $(".top").toggleClass("one");
        $(".middle").toggleClass("two");
        $(".bottom").toggleClass("three");
        $(".nav-menu").toggleClass("menu-show");
    }, 450);
});

Answer 2

如果您想要單擊事件后的延遲，則應將setInterval函數放在click函數中：

$("#bound").click(function () {
  setInterval(function () {
    $(".top").toggleClass("one");
    $(".middle").toggleClass("two");
    $(".bottom").toggleClass("three");
    $(".nav-menu").toggleClass("menu-show");
  }, 450);
});