javascript - Avoid setTimeout to overlap the function on angular $watch -

I have this verification process, in which two divisions are fading or out based on the return of the first function. After typing the input to finish SetTimeout, it looks at the keypage, the system works but the problem occurs when:

You type a wrong value (# ranks displays)> you get good value When you type good value and another function triggers it is not yet completed> when good value is typed (.ok shows) after the delay of setrimeout # Wrong as well

Is there any way to avoid overlapping other functions? Maybe it is to divide completely right and false actions? Validate the

  functionPicodode (code) {if (array.indexOf (code)> gt; -1} {true; }} $ Scope. $ Watch ('passcode', function (value) {var isValid = valid pincode (value); if (isValid) is {$ scope.loadNewChannel (); $ ('OK'). FadeIn (200); $ (' FadeOut (200);} and {setimimate (function () {$ ('. OK'). Fadeaut (200); $ ('# incorrect') Delay (200). Fadein (200); }, 2000);}});  

I will take a slightly different view Connor's idea is to manipulate the dome inside your controllers. You do not have to have a few options - one will have to expose $ $ on the curve and the other will be an instruction that will create the animation.

For throttling the input, the problem is that after every key press you are waiting two seconds. Do you really want that until the key press is not organized, wait till someone waits for typing, once again they are stopped for evaluation.

You can do this with underscore or lo-dash's sister such thing:

  var Apply Validity = function ($ scope) {$ scope.isValid = ValidatePasscode ($ scope.passcode); }  

Because you need to apply it to a fire outside the Digest Loop of the Conjunction:

  var validation = function ($ scope) {$ Scope $ applied (function () {applyValidation ($ scope);}); };  

Then you can see it and only react once you have an investment. This will only be checked after the user has stopped typing for 1 second:

  var validationThrottled = _.debounce (validationDelayed, 1000); $ Scope $ Watch ('passcode', function () {validation throttled ($ radius);});  

Again, it will solve time, but I recommend going to a command for animation, although you can try this code in this way:

var applied verification = function ($ scope) {if (validated passcode ($ scope.passcode)) {// success animation} other {// failure animation}} < P> Here's one of my workmates, Bella uses a similar concept: (I'm filtering instead of validating, Ekin you can see that the throttle works) and even a blog post about it: