Solve the problem of displaying errors based on the JQ Focus chart Quick Click toggle button Picture

Before using the original JS to do the focus map, today suddenly want to use JQ to do, but encountered a problem, when I kept clicking the toggle button, because the animated animate, resulting in the picture shows the problem of confusion, the first thing to think about is to click on the switch immediately after the event is resolved, Then the animation function runs out and then adds the event, but .... Use

$ ('. Box '). Unbind (' click ');

After the binding, and then add the original event back but there is no way to add back

$ ("button"). Bind ("click", Function () {  //body});

Such But the function of the body can not write, there may be a way to write but the more confused, then think of a better way

Add a flag listener variable, when the click-click event is flag==true and the flag is false in the event run, this solves the problem simply and conveniently. On the Code

var now=0;var flag=true;            This is it. $ ('. Prve '). Click (function () {if (flag) {Flag=false;now=parseint ($ (' ul '). CSS (' left ')), $ (' ul '). Animate ({left : now+500+ ' px '},300,function () {Now=parseint ($ (' ul '). CSS (' left ')), if (now>= 0) {$ (' ul '). CSS (' left ', ' -2500px ');} Flag=true;     In this});})

Yes, there is one more thing that cannot be placed outside of the animate () method's callback function, because animate () animations can change the value of the flag, the outside function is executed when the animation () is executed, and the animate animation will still not solve the problem in the order of execution.

JS is a single-threaded language, so there has to be a sequence.

Solve the problem of displaying errors based on the JQ Focus chart Quick Click toggle button Picture