I've created a test page that mimics the problem I am getting on my actual page.
As you can see in doSomething2()
, the dfd object is deliberately never resolved. However, when I run the following code, the .done()
in doSomething()
always fires. Inspecting the console, you will see that dfd.isResolved()
is false right before .done()
runs.
Any insights? Any help is appreciated
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<script src="jquery-git-02092011.js" type="text/javascript"></script>
</head>
<body>
<div id="test">
<div ></div>
<div ></div>
</div>
<script>
function doSomething() {
$('#test div').each(function(){
$(this).append($('<div></div>').load('http://www.google.com',function(){
doSomething2().done(console.log('dosomething2 is complete'));
}))
});
}
function doSomething2() {
var dfd = $.Deferred();
console.log(dfd.isResolved());
return dfd;
}
$(document).ready(function() {
doSomething();
});
</script>
</body>
</html>
edit: I UNDERSTAND that this function accomplishes nothing. I've just made an example to replicate my problem. I UNDERSTAND that fetching 'google.com' is against SOP. I've just created this example to replicate my problem. I am developing a web app that is meant to run locally from one html file. In this case, SOP is not strictly adhered to, so this should be ok to at least test.
edit:I've created a jsfiddle to test this behavior: http://jsfiddle.net/Sgwpv/2/
Your problem is this passing in a statement to .done rather then a function
see live example
Internally, .done
takes a list of functions and pushes them to a callback array so
callbacks.push(elem);
You pass in a statement as elem
and get
callbacks.push(alert("foo"));
Your pushing the return value of the statement (in this case undefined
) to the callback array rather then a function.