Template method pattern with setTimeout in JavaScript

Question

I have a close function that will close some instance. The class that includes the function allows derived classes to override close. Here, I want to make sure that close always calls dispose even in derived classes. I achieve this by the following.

function close() {
  closeCore();
  dispose();
}

function closeCore() {
  // derived class can override this method.
}

This works fine, but I have one case where I want to perform CSS animation before I dispose the instance. This is what I do.

function close () {
  instance.classList.add("fancy-animation-that-takes-800ms");

  setTimeout(function () {
    dispose();
  },800);
}

But as soon as I do this, the template pattern I use cannot be applied. Is there a way to make sure the close function always call dispose in the second example?

Parameterize `close` function (with an optional param `disposalTimeout` passed meaning `dispose` should be called async). — raina77ow, Feb 08 '14 at 22:40
@raina77ow, can you maybe show an example by posting it as an answer? Btw, I want to do it without adding a new parameter to the function. — CookieEater, Feb 08 '14 at 22:45
`function close(disposeTimeout /* = false */) { /* ... */ if(disposeTimeout) { setTimeout(dispose, disposeTimeout) } else { dispose(); }` — raina77ow, Feb 08 '14 at 22:47
Thank you, that works, but I am still looking for a way without adding a new parameter. — CookieEater, Feb 08 '14 at 22:51

Brett Zamir · Accepted Answer · 2014-02-08T23:53:05.910

You might have close expect an object be returned from closeCore which had parameters like these:

return {timeout: 800, callback: function () {/*....will execute after a timeout..*/}};

or:

return {callback: function () { /*...will be immediately executed...*/}};

or:

return function () { /*...will be immediately executed...*/};

...and then call their timeout for them (if any), and then after your timeout executed their callback, then call dispose for them.

The relevant part of your close code might look like:

function close() {
  var ccObj = closeCore();
  var ccIsObj = ccObj && typeof ccObj === 'object';
  var callback = typeof ccObj === 'function' ? ccObj : (ccIsObj ? ccObj.callback : null);
  if (ccIsObj && ccObj.timeout) {
    if (!callback) {
      throw 'You must implement a callback when supplying a timeout';
    }
    setTimeout(function () {
        callback();
        dispose();
    }, ccObj.timeout);
  }
  else {
    if (callback) {callback();}
    dispose();
  }
}

But if you want to allow the user to make arbitrary asynchronous calls of their own (such as Ajax), while you could instead allow the returning of a promise to which you added the dispose call, you wouldn't have a guarantee that the deriver would ensure the promise completed. You could automatically cancel the promise after a certain period of time, but you couldn't magically know when the deriving code was meant to finish unless again you abstracted this.

Template method pattern with setTimeout in JavaScript

1 Answers1