Skip to content

Loading…

Guard against Webkit's extraneous calls to xhr.onreadystatechange #633

Closed
wants to merge 1 commit into from

2 participants

@jsnuggle

In certain cases Webkit will call the onreadystatechange method of a single XMLHttpRequest object multiple times indicating that it is ready (readyState == 4).

This results in Zepto's 'success' or 'error' methods being called multiple times for the same AJAX request.

This is documented in this thread:
http://stackoverflow.com/questions/12761255/can-xhr-trigger-onreadystatechange-multiple-times-with-readystate-done

with a jsfiddle here:
http://jsfiddle.net/44b3P/

and confirmed here:
http://osdir.com/ml/general/2012-10/msg12396.html

To reproduce in Zepto:

  1. visit http://jsfiddle.net/Rvk9j/1/ in Chrome (I'm using Chrome 22 for Mac)
  2. Open the debug console
  3. Click the 'Run' button
  4. When you reach the debugger statement, step forward (either click the Play button in Chrome's console or click F8) [1]

Expected: you should see 1 alert with the text 'error'

Actual: the alert with the text 'error' occurs 3 times

I'm working to find a way to reproduce this and submit upstream (at least to Chrome -- maybe to Webkit? -- We think it's a Webkit bug since we first observed this issue in Safari on iOS 6).

In the meantime this patch should resolve the issue in Zepto.

[1] While this is an awkward way to reproduce (clearly a debugger statement shouldn't be in production code) we've observed similar behavior in our production code where success functions are called multiple times for the same AJAX request -- usually when there's a lot going on on the page or the page hasn't completed loading.

The 'debugger' statement was the most reliable way I've seen to approximate these conditions and reproduce the behavior.

@mislav
Collaborator

I would be more motivated to accept a workaround for am obscure WebKit issue if it was filed in their issue tracker.

@jsnuggle

I've filed a bug with Chorme based on the info I have:

http://code.google.com/p/chromium/issues/detail?id=159827

It references the Webkit reports I've found around the web.

Good luck with your project.

@mislav mislav added a commit that referenced this pull request
@jsnuggle jsnuggle work around Chrome bug where Ajax callback fires more than once
The bug is present in Chrome 23.0.1271.64 and possibly iOS 6, and is
reproducible using the debugger but otherwise occurs randomly.

References #633

http://code.google.com/p/chromium/issues/detail?id=159827
8e84f2e
@mislav
Collaborator

OK, I think I just seen the issue in the wild while using GitHub.com: an ajax callback got executed twice in jQuery.

Pulled your fix. Thanks!

@mislav mislav closed this
@jsnuggle

Great! Thanks a lot Mislav!

@lopper lopper added a commit to buddydvd/zepto that referenced this pull request
@jsnuggle jsnuggle work around Chrome bug where Ajax callback fires more than once
The bug is present in Chrome 23.0.1271.64 and possibly iOS 6, and is
reproducible using the debugger but otherwise occurs randomly.

References #633

http://code.google.com/p/chromium/issues/detail?id=159827
df224b2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 6, 2012
  1. @jsnuggle
Showing with 1 addition and 0 deletions.
  1. +1 −0 src/ajax.js
View
1 src/ajax.js
@@ -195,6 +195,7 @@
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
+ xhr.onreadystatechange = empty;
clearTimeout(abortTimeout)
var result, error = false
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 || (xhr.status == 0 && protocol == 'file:')) {
Something went wrong with that request. Please try again.