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);
});

setInterval函数中的onClick toggle类

2 个答案: