New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

animate() - callback function is executed before animation has been completed in latest jquery 3.2.1 #3861

Open
keerthanaRajendran opened this Issue Nov 24, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@keerthanaRajendran

keerthanaRajendran commented Nov 24, 2017

Hi All,

We have upgraded jquery version from 3.1.1 to 3.2.1. Now the code inside animation()- callback function is executed before animation is completed and then it executes the next line

$(".btn2").click(function(){
$("p").slideDown(1, function(){
console.log("inside")
});
console.log("outside")
});
JQuery 3.2.1 output
1.inside
2.outside.

JQuery 3.1.1 output
1.outside
2.inside.

Sample Link(jquery 3.2.1): https://www.w3schools.com/code/tryit.asp?filename=FLMCAWA173W6

Sample Link(jquery 3.1.1): https://www.w3schools.com/code/tryit.asp?filename=FLMETVQCUR42

Expected result:
1.outside.
2.Inside

Please let me know if you have any concern,

Thanks for your help in advance.

Regards,
Keerthana.

@gibson042

This comment has been minimized.

Show comment
Hide comment
@gibson042

gibson042 Nov 26, 2017

Member

This appears to be a case of code changes affecting the most likely outcome of a race condition. jQuery animations can resolve synchronously, and a 1 millisecond duration is short enough that it has almost always elapsed by the time we check for completion in the first tick as of 6d43dc4 (on my computer, 3 ms seems to always avoid the synchronous completion and 2 ms is pretty much a coin flip). However, I'm not convinced that this is a problem with jQuery.

If you require asynchrony, I recommend using setTimeout or .then (example) inside the completion callback. But you should also reconsider having such a short animation in the first place—it would probably be cleaner to set the properties immediately without animation and construct your own Promise for asynchronous handling.

Member

gibson042 commented Nov 26, 2017

This appears to be a case of code changes affecting the most likely outcome of a race condition. jQuery animations can resolve synchronously, and a 1 millisecond duration is short enough that it has almost always elapsed by the time we check for completion in the first tick as of 6d43dc4 (on my computer, 3 ms seems to always avoid the synchronous completion and 2 ms is pretty much a coin flip). However, I'm not convinced that this is a problem with jQuery.

If you require asynchrony, I recommend using setTimeout or .then (example) inside the completion callback. But you should also reconsider having such a short animation in the first place—it would probably be cleaner to set the properties immediately without animation and construct your own Promise for asynchronous handling.

@gibson042 gibson042 added the Effects label Nov 26, 2017

@gibson042

This comment has been minimized.

Show comment
Hide comment
@gibson042

gibson042 Nov 27, 2017

Member

We decided in the meeting to leave this open. Hopefully, we can abandon synchronous resolution by updating jQuery.fx.start to schedule the first tick with a zero-duration timeout, which will also fix the stutter from animating a collection (in which the first element gets a head start).

Member

gibson042 commented Nov 27, 2017

We decided in the meeting to leave this open. Hopefully, we can abandon synchronous resolution by updating jQuery.fx.start to schedule the first tick with a zero-duration timeout, which will also fix the stutter from animating a collection (in which the first element gets a head start).

@timmywil timmywil added this to the Future milestone Jan 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment