jquery-promises.js

/**
 *  Why jQuery "promises" are bad
 */

// This is a promise that will print "A" after a setTimeout
var es6Promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('A');
    resolve();
  }, 0);
});

// Using only es6 promises
Promise.resolve().then(() => {
  return es6Promise;
}).then(() => {
  console.log('B');
});
// Prints A, B

// Mixing jQuery/es6 promises
var jQueryPromise = $.Deferred();
jQueryPromise.then(() => {
  return es6Promise;
}).then(() => {
  console.log('B');
});
jQueryPromise.resolve();
// Prints: B, A
// This is because the jQuery promise doesn't realize es6Promise is a promise,
// so it doesn't wait for it to finish execution. This makes it easy to
// introduce unintended race conditions or other side effects, since it's
// absolutely not how promises are supposed to work