How to complete a function execution before starting to execute another function

Question

Please I have used .done() to ensure a function is completely executed before starting to execute next function. I borrowed the idea from Ajax. But it is not working. I keep getting error message done() is not a function. Is done() only for Ajax? If yes, how can I accomplish my wish.

document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    //do somethings

  }
}

//This must be completely executed before addNu()
$( "#mybutton" ).click(function() {
  //Do some things

}).done(addNu());


function addNu() {
  //do some things
}

Note that none of the script is async. each must be completed before running the next

`click()` is not async, so the `done()` - even if it worked - is redundant. It won't work though as `click()` returns a jQuery object, not a Promise. It's not clear at all what you're asking, but presumably you have an AJAX call inside the click handler and you want to call `addNu()` when that completes? If so, place the `addNu()` call in the call back of your AJAX code. — Rory McCrossan, Jul 06 '17 at 15:03
Possible duplicate of [Call a function after previous function is complete](https://stackoverflow.com/questions/5000415/call-a-function-after-previous-function-is-complete) — DanD, Jul 06 '17 at 15:32

score 0 · Answer 1 · answered Jul 06 '17 at 15:06

0

Why you dont just call the function at the end of .click event?

document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    //do somethings

  }
}

//This must be completely executed before addNu()
$( "#mybutton" ).click(function() {
  //Do some things

   addNu()
});


function addNu() {
  //do some things
}

answered Jul 06 '17 at 15:06

Noidz

35
7

This doesn't work because function1 did not complete clearing existing images on the page before function2 starts to execute rendering a new image. At the end we have both old & new images displaying on the page. I have read about such situation but never experienced until now. It applies to image rendering, animation etc. Hence we have to make sure function1 completes execution before function2 starts to execute. I have provided my workable solution above after going through the references earlier suggested by others. – Kingsley Jul 08 '17 at 22:46

score 0 · Answer 2 · answered Jul 06 '17 at 15:08

Unfortunately the .done method is reserved for promises returned from an AJAX request.

You can achieve the same result by creating your own JS Promise that does not require AJAX.

A good website that demonstrates how promises work is https://scotch.io/tutorials/javascript-promises-for-dummies

score 0 · Answer 3 · answered Jul 07 '17 at 20:53

I have gone through solutions given here and references prescribed. None worked because these scripts are neither ajax nor async. I solved it this way:

document.onreadystatechange = function () {   
  if (document.readyState === "complete") {
    //do somethings

  } 
}

//This must be completely executed before addNu() 
$( "#mybutton" ).click(function() {
  //Do some things

  //Check if completely done e.g.    
  length = $('img').length;    

  if (!length) {
     addNu();    
  } 
});    

function addNu() {
 //do some things 

}

How to complete a function execution before starting to execute another function

3 Answers3