javascript - how to wait check ajax request has completed before other element? -

i have following code, each image makes ajax call. problem when make ajax call first image,at time without waiting respose invokes second.so hasn't effect of first call,means missed first call effect. similary without waiting second inovking third,...

so how wait in above each function until response come?

jquery('.xxx img[src*="mainimage"]').each(function () {         vobj = $(this);         var inmainurl = 'https://xxx.kki/api/oembed.json?url=' + $(this).attr('src');         $.ajax({             url: inmainurl,             datatype: 'json',             success: function (result) {                   $(vobj).attr('src',result.thumbnail_url);              }         });       }); 

you should use recursive function these purposes. basic example (jsfiddle):

var mymethod = function(index){     var total_images = $('img').length;     if( index == total_images ) return; // job finished     var current_image = index || 0;     $.ajax({         /*...*/         success: function(/*...*/){             /*...*/             mymethod(current_image + 1);         }     }); };  mymethod();