I've been puzzling for quite a while trying to wrap my head around JavaScript promises. I want to fix some issues with asynchroneous calls in my code, to de-spagethise it. But I'd love for an expert to help me, because I've wasted quite some time already.
I want to use the jQuery Deferreds for it, since I'm using jQuery (v1.11) in my project already, and I don't want to add any more libraries (already have over 5). I read that the jQuery doesn't fully follow the Promises/A spec, but I figured it'd be good enough for my use case. I'll look at q.js or other libs later.
I was trying to create a simple example and I'm already familiar with the asynchroneous behaviour of JavaScript as exemplified by this SO question: setTimeout delay not working
I created a JS fiddle to solve that user's problem but using a 'pyramid of doom' construction: http://jsfiddle.net/bartvanderwal/31p0w02b/
Now I would like a nice bare-bones example of how to flatten this pyramid using Promises and chaining method calls using then()'s or something:
$.when(takeStep())
.then(takeStep())
.then(takeStep())
.then(takeStep())..
However I can't get it to work. My attempt so far is in this Fiddle: http://jsfiddle.net/bartvanderwal/vhwnj6dh/
Edit 20:58: Here is the now working fiddle thanks to (mainly) @Bergi: http://jsfiddle.net/bartvanderwal/h2gccsds/