CODEWITHSUNDEEP
javascriptjquerypromise
Michael Große
Michael Große

Reputation: 1886

How and when to rewrite jQuery callbacks into promises?

I consider rewriting existing callback-based code into code using promises. However I'm unsure if this makes sense and how to start. The following code-snippet is a mostly self-contained example from that code: 

function addTooltip($element, serverEndpoint, data) {
'use strict';

const DELAY = 300;
const TOOLTIP_PARENT_CLASS = 'hasTooltip';
let timeOutReference;
$element.hover(function hoverStart() {
    if ($element.hasClass(TOOLTIP_PARENT_CLASS)) {
        return;
    }
    timeOutReference = setTimeout(function getToolTip() {
        const $span = jQuery('<span class="serverToolTip">');
        $span.html(jQuery('<span class="waiting">'));
        $element.append($span);
        $element.addClass(TOOLTIP_PARENT_CLASS);
        jQuery.get(serverEndpoint, data).done(function injectTooltip(response) {
            $span.html(response.data);
        }).fail(handleFailedAjax);
    }, DELAY);
}, function hoverEnd() {
    clearTimeout(timeOutReference);
});
};

Intended functionality: When the user hovers over $element for 300ms the tooltip-content is requested from the server and appended to $element.

Does it make sense to rewrite that code with promises and how would I do it?

(jQuery is provided by the framework (dokuwiki), so we might as well use it.)

Prior research:

Upvotes: 0

Views: 94

Answers (2)

Joseph
Joseph

Reputation: 119847

First, you'd need to wrap setTimeout into a promise. Simply create a function that accepts a timeout and returns a promise that resolves after that timeout.

Next, since jQuery.get already returns a promise, you just need to put it inside the promise resolve handler and return its promise. That way the next chained then listens to that promise instead of the timer's.

It would look something like:

function timer(n){
  return Promise(function(resolve){
    setTimeout(resolve, n);
  });
}

timer(DELAY).then(function(){
  return jQuery.get(...)
}).then(function(response){
  // jQuery.get promise resolved
}).catch(function(error){
  // something failed somewhere
});

As for your question

Does it make sense to rewrite that code with promises and how would I do it?

That depends on you. I find promise-based code more readable but takes time to write properly especially if if you intend to write pure callbacks and deal with multiple async operations. I usually write my code callbacks-first if the API is simpler to write that way and refactor later for readability.

Upvotes: 2

Adam Jenkins
Adam Jenkins

Reputation: 55643

To elaborate on my comment above. Below is an example of how promises can make dependent-callback code (arguably) more readable (Basically, it destroys the nesting of callbacks-in-callbacks):

Again, in the case of the code snippet you posted, I hardly see how it's worth it (unless your doing it as an exercise).

With Callbacks

function someAsyncMethod(callback) {
   $.get({...})
   .then(callback);
}

function anotherAsyncMethod(callback) {
   $.get({...})
   .then(callback);
}

someAsyncMethod(function() {
   anotherAsyncMethod(function yourFunction() {
      //do something
   });
});

With Promises:

function someAsyncMethod() {
  return $.get({...});
}

function anotherAsycnMethod() {
  return $.get({...});
}

someAsyncMethod()
 .then(anotherAsyncMethod)
 .then(function yourFunction() {
    //do something
  })

Upvotes: 1

Related Questions