How do I chain of 2 deferred functions and prevent third function from being executed if second is rejected in jQuery 1.8.x?

Question

Given 2 deferred functions

function func1() {
  var dfd = $.Deferred();

  setTimeout(function() {
    dfd.resolve('Password');
  }, 1000);

  return dfd.promise();
}

function func2(id) {
  var dfd = $.Deferred();

  if (id == 0) {
      dfd.reject();
  }
  else {
      dfd.resolve();
  }
  return dfd.promise();
 }

 function func3()
 {
    alert('Hello World')
 }

if func2 is rejected, I dont want func3 to be executed.

ive tried

func1().then(func2(1)).then(func3())

and

func1().then(func2(1)).done(func3())

func3() seems to be always executed.

You all times execute func3, you should path the link to the func3. for example .then(func3) — Nikolai Borisik, Mar 18 '17 at 16:26

Neil · Answer 1 · 2017-03-19T16:47:03.650

1

func1().then(func2(1)).then(func3())

Should be:

func1().then(function () {func2(1)}).then(func3)

Which actually should be:

func1().then(() => func2(1)).then(func3)

When you send arguments to a function, the function will execute (even in the case of (). So, what we need to do is prevent this. Since func3 takes in no arguments, we can just pass it as is into the function, no (). But since we want func2 to have arguments, we are defining a function around it. So, you can do it via function or you can do it via an arrow function, =>.

Here's how you would check for failure.

func1().then(() => func2(0)).fail(() => alert("oh no")).then(func3);

edited Mar 19 '17 at 16:47

answered Mar 18 '17 at 16:54

Neil

14,063
3
30
51

i tried func1().then(function () {func2(0)}).then(func3) that didnt work but this func1().then(() => func2(1)).then(func3) did. Whats the difference? – user5231379 Mar 18 '17 at 21:15
The issue is in the event of 0 you don't handle the failure of the promise: http://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done . You need to add `.fail()`. If you could upvote or mark mine as solution, that would help a lot. – Neil Mar 18 '17 at 21:19
IE edge does not support arrow functions. furthermore why is done executed when func2 fails? – user5231379 Mar 19 '17 at 15:25
Wait a second, are you just stringing them all together? What's your code? – Neil Mar 19 '17 at 16:35
func1().then(() => func2(0)).then(func3) – user5231379 Mar 19 '17 at 16:37
I updated the code with how to handle errors. Sorry for being rude, I realized that right after I posted it. – Neil Mar 19 '17 at 16:47
Sorry I meant IE 11. Getting an syntax error at the arrow function – user5231379 Mar 19 '17 at 17:03
oh, just use a normal function then. – Neil Mar 19 '17 at 17:09

score 0 · Answer 2 · answered Mar 19 '17 at 17:10

Make sure not to invoke the functions you pass to then. It is the jQuery deferred implementation that needs to call them, not you, so you need to pass functions, not function calls.

Secondly, if you need to have an argument passed, then you can use .bind, which creates a new function from an existing one, but which will pass the argument that you specify at the moment the function is called:

func1().then(func2.bind(null, 1)).then(func3)
       .fail(function () { console.log('failed') });

The first argument passed to then is only called when the promise is resolved, not when it is rejected. So as soon as there is a rejected promise in the chain, none of the chained then callbacks (first arguments) will be executed.

How do I chain of 2 deferred functions and prevent third function from being executed if second is rejected in jQuery 1.8.x?

2 Answers2