jQuery problem with (a)synchronous method calls

Question

I have an strange behavior, which looks lika an problem with (a)synchronous method calls?!? I'm not sure! An function receives data using getJSON, post process those data, add them to an table, which is sortable by the table-sorter plugin (http://tablesorter.com/).

Here some parts of the code. A function receives data by getJSON:

jQuery.getJSON(url,{},function(data)
              {
             success:{ ....

in the success block, the data will be processed in an for-each loop. during that for-each loop, every JSON element will be manipulated (doSomething()) an added to an HTML table:

success:{ [some-code]
          $.each (data.words, function (i,n) 
                              {result=doSomething(n);
                               obj=jQuery('#Template').clone().appendTo('#table');
                               obj.html(result);
                              }

finaly, after that for-each i have to update the Table-sorter -extension and start an new sorting:

         jQuery("#table").trigger("update");
         $("#table").trigger("sorton",[[[1,1]]]);
}; //end of "success

This code is simplified. The Problem is, that $("#table").trigger("sorton",[[[1,1]]]); only works correctly, if i start this function delayed setTimeout('$("#trends").trigger("sorton",[[[1,1]]]);',20);.

I think, that the output obj.html(result); will be asynchronous. So if i start the sorter-function without setTimeout, the sorter-function founds no data at runtime.

Is there a way to make that success block linear?

Thank you, for any kind of help!!

score 2 · Accepted Answer · answered Jul 02 '11 at 13:29

If you look at the source for the tablesorter, the update event has a setTimeout in it, which is most likely what is affecting your call to sort the table.

$this.bind("update", function () {
    var me = this;
    setTimeout(function () {
    // rebuild parsers.
        me.config.parsers = buildParserCache(
        me, $headers);
        // rebuild the cache map
        cache = buildCache(me);
    }, 1);

A complete hack would be to add your sorting to the end of that block of code. A more elegant solution I'm not sure I can provide, but I wanted to share that finding with you.

absolutely... that's it! Thank you. :-) – The Bndr Jul 04 '11 at 15:44 — The Bndr, Jul 04 '11 at 15:44

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

I think you more or less solved your own problem. Put all of your success: callback code in a function and specify that function in the success attribute. The getJSON() call is asynchronous, so when it completes there needs to be a function existing for it to call.

By that I mean, do this:

success: doSuccess();

and not this:

success: function() {}

Alternatively, you can make the call synchronous if you want to, see this: Is there a version of $getJSON that doesn't use a call back?

edited May 23 '17 at 11:55

Community

1
1

answered Jun 29 '11 at 13:54

Steve Claridge

10,650
8
33
35

>I think you more or less solved your own problem. <- solved by setTimeout? I think, that's more an workaround. I moved the content from the success block into the function doSuccess(data), as you wrote. but there is no difference. >The getJSON() call is asynchronous <-- until now, i thought, the whole success block will be called asynchronous, but inside this block there is an linear processing?! – The Bndr Jun 29 '11 at 14:06
Yes, getJSON calls a function upon its asynchronous return. If you are not using any further callbacks within your success function() then the execution of that function is synchronous. I'd recommend stepping through it with Firebug. – Steve Claridge Jun 29 '11 at 14:10
>"If you are not using any further callbacks within your success function() " <-- is $.each(object, function() .... an callback-function? – The Bndr Jun 29 '11 at 14:48
okay, thank you - so I don't have any call-back function inside the success-block and so i don't know, why the success - block is asynchronous/not processed linear :-( – The Bndr Jun 29 '11 at 15:33
...could be the mixed usage of $() and jQuery() rise this problem? – The Bndr Jun 29 '11 at 15:36

jQuery problem with (a)synchronous method calls

2 Answers2