setInterval函数中的onClick切换类

Question

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

What is wrong with it? Transition lags too much and sometimes stops workin.

Answer 1

What is wrong with it?

The thing is you are binding so many click events at the interval of 450ms which will lead the browser to consume so much memory and browser will be unresponsive eventually.

Other noticeable thing is that you will get the "n" the number of bound events. So, as it is a continued process so at each iteration it will bind an event means if two iterations then two callbacks execution.

I guess you might instead do this:

$("#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

Incase you want the latency after click event, you should put setInterval function inside click function:

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