javascript - Confusion between jQuery Deferrable, jsDeferred, and just deffering in general -

javascript - Confusion between jQuery Deferrable, jsDeferred, and just deffering in general -

i downloaded library called jsdeferred seek , help me code-flow problems, little lost, examples , ...'documentation' little unclear on things. kept reading , digging, , of course of study googling under sun, found out jquery has own deferred() system. linking both here, proper context.

link jsdeferred library link jquery.deferred() the problem

i need find way tell page "hold on until lastly thing done".

this thought jsdeffered did. part of question asking which should use? jsdeferred or jquery.deferred(); , how utilize it i've outlined below.

the situation

my scenario this, in nutshell, need perform next behavior.

page loads, view model defined

this using kendo ui mvvm declare view model, kendo.data.observableobject

an $.ajax phone call made database default model data

this getting trouble. need "hold on" until $.ajax done. don't want wrap in $.ajax().done(r) if can help it. looks/feels sloppy me , kind of confusing @ times.

other widgets on page rendered, have respective database queries done through kendo ui remote datasource.

these working intended.

jquery validate wired view, defaults having been set already.

this working intended.

kendo.bind('body', viewmodel); called perform model binding.

now running trouble, going step 2 making $.ajax call. keeps happening kendo.bind fired before $.ajax completes. can set in $.ajax({}).done(); function, , this exact 1 specific page work, there many other situations isn't suitable.

what have tried

first, i'll clear jsdeferred documentation unclear me, running samples verbatim doesn't work. continuously told next not defined , like. figured out have have implicit deferred. before phone call next first time.

so here thought happen...

var viewmodel = new kendo.data.observableobject({ // various view model properties defined }); deferred.define(); next(function() { // let's phone call step 1 $.ajax({ // info ajax controller }).done(function(result) { // perform operations result }); }). next(function() { // let's phone call step 2 $('#dropdownlist_target').kendodropdownlist({ // parameters, remote info source drop downwards list, etc. }).data("kendodropdownlist"); }). next(function() { // let's phone call step 3 $('form').validate({ // form validation stuff }); }). next(function(){ // let's phone call step 4 kendo.bind('body', viewmodel); });

i believed these each run one, right after other, when previous 1 finished. not happening. step 1 still in process of fetching while step 2, 3 , 4 running.

this doesn't seem different way code running without jsdeferred library. confused , absolutely love help here. need step 1 finished before step 2 fires, basically.

the problem next() expects return thing want wait for. in step one, you're not returning anything. jsdeferred hence assuming performing synchronous operation (that has finished), , continues step 2.

instead, homecoming jquery.deferred() returned $.ajax() call. jsdeferred wait finish before executes step 2.

regardless of this, i'd dump jsdeferred. you've realised, jquery has fledged deferred implementation. i'm not sure jsdeferred brings party.

using $.ajax().done(r) not sloppy. asynchronous behaviour core of event driven languages, , javascript one. encompass it, or you'll go bald very in life trying avoid it.

if revert jquery's deferred implementation, might then(), give semantics of next();

$.ajax({ // info ajax controller }).done(function(result) { // perform operations result }).then(function () { $('#dropdownlist_target').kendodropdownlist({ // parameters, remote info source drop downwards list, etc. }).data("kendodropdownlist"); $('form').validate({ // form validation stuff }); kendo.bind('body', viewmodel); }).then(function () { // note can chain then()'s well. });

javascript jquery jquery-deferred