Develop Reference

How to overwrite/cancel previous promise called one by one?

I have jQuery code that respond to user keyboard press and I'm checking if element is in view. The plugin return promise if user press the key very fast or hold it (right now it's too fast for my code) it create promise in kind of loop. I want to cancel previous promise before I call new one.
I came up with this code that ignores previous promise:
var scroll_callback_counter = 0;
function move_cursor_visible() {
var cursor = self.find('.cursor');
var i = scroll_callback_counter++;
return cursor.is_fully_in_viewport(self).then(function(visible) {
if (i === scroll_callback_counter && !visible) {
var offset = cursor.offset();
var container_offset = self.offset();
self.scrollTop(offset.top - container_offset.top - 5);
return true;
}
});
}
Is there a better way? It works but I don't know if this is correct way to create code that cancel/ignore promise callback.
EDIT:
Here is is_fully_in_viewport function:
function jquery_resolve(value) {
var defer = jQuery.Deferred();
defer.resolve(value);
return defer.promise();
}
$.fn.is_fully_in_viewport = (function() {
function is_visible(node, container) {
var box = node.getBoundingClientRect();
var viewport = container[0].getBoundingClientRect();
var top = box.top - viewport.top;
var bottom = box.bottom - viewport.top;
var height = container.height();
return bottom > 0 && top <= height;
}
if (window.IntersectionObserver) {
return function(container) {
var node = this[0];
var defer = jQuery.Deferred();
var item_observer = new window.IntersectionObserver(function(entries) {
defer.resolve(entries[0].isIntersecting);
item_observer.unobserve(node);
}, {
root: container[0]
});
item_observer.observe(node);
return defer.promise();
};
} else {
return function(container) {
return jquery_resolve(is_visible(this[0], container));
};
}
})();

Creates a debounced function that delays invoking func until after
wait milliseconds have elapsed since the last time the debounced
function was invoked.
You can use debounce method of loadash,
_.debounce(func, [wait=0], [options={}])
The debounced function comes with a cancel method to cancel delayed
func invocations and a flush method to immediately invoke them

What's the best way to add a callback to the following module?

I have the following module
var m=(function() {
// setup variables
return {
center: function() {
// do stuff
},
open: function(settings) {
// do open stuff
// setups the handler for the close...
$close.on("click",function(e) {
e.preventDefault();
m.close();
});
},
close: function() {
// do close stuff
// ** need to add code here
//to perform a callback function on close
// EDIT
if(this.hasOwnProperty("callback"))
callback();
},
//** EDITED
addCallback: function(func) {
this.callback=func;
}
};
}());
// open
m.open();
The close in the triggered automatically by a click event. I want to somehow insert a callback into the close() to be performed at the time of closing... I thought about adding a function like
addCallback(callback) {
this.callback=callback;
}
but i'm not sure how to call that within the close().
** EDIT **
Thanks to user3297291 for the below response and Barmar you were right I do actually only need one callback not an array. I have edited the above code by adding a addCallback(). Then the code to run would be:
m.open()
function check() {
alert("hello");
}
m.addCallback(check);
But this doesn't work I'm trying to understand why and I new to javascript OO..

You'll have to keep track of an array of callbacks (or just one). The simplest implementation could be something like this:
var m = (function() {
var onCloseCallbacks = [];
return {
addOnCloseCallback: function(cb) {
onCloseCallbacks.push(cb);
},
close: function() {
console.log("Closing");
onCloseCallbacks.forEach(function(cb) {
cb();
});
}
};
}());
m.addOnCloseCallback(function() {
console.log("After close");
});
m.close();
Note that the array of callbacks is defined inside the closure.
For a more advanced solution, you'd want to be able to dispose the callback from outside of the m module. Here's an example of how this could be added:
var m = (function() {
var onCloseCallbacks = [];
return {
addOnCloseCallback: function(cb) {
onCloseCallbacks.push(cb);
return {
dispose: function() {
var i = onCloseCallbacks.indexOf(cb);
onCloseCallbacks = onCloseCallbacks
.slice(0, i)
.concat(onCloseCallbacks.slice(i + 1));
}
};
},
close: function() {
console.log("Closing");
onCloseCallbacks.forEach(function(cb) {
cb();
});
}
};
}());
var myCallback = m.addOnCloseCallback(function() {
console.log("After close");
});
m.close(); // Does trigger cb
myCallback.dispose();
m.close(); // Doesn't trigger cb

Trouble with setInterval in an object's method

I can't figure out why when I call the reset method of the object, the timer is still null. I simplified version of my object is below, followed by the jQuery that constructs a new object and runs the code. See UPPERCASE comments for my specific question points. Thanks!
var countdownTimer = {
// Default vars
milliseconds: 120000,
interval: 1000,
timer: false,
/* ... stuff ... */
countdown: function () {
var root = this;
var originalTime = root.milliseconds;
/* ... stuff */
// IN MY MIND THIS NEXT LINE SETS THE INSTANCE OF THIS OBJECT'S TIMER PROPERTY TO THE setIterval's ID. BUT DOESN'T SEEM TO BE CORRECT. WHY?
root.timer = setInterval(function () {
if (root.milliseconds < 1) {
clearInterval(root.timer); // THIS LINE SEEMS TO WORK
root.countdownComplete(); // callback function
return false;
}
root.milliseconds = root.milliseconds - root.interval;
/* .... stuff ... */
}, root.interval);
},
start: function (ms) {
if (ms) {
this.milliseconds = ms;
}
if(this.timer) {
clearInterval(this.timer); // NOT SURE IF THIS WORKS OR NOT
}
this.countdown();
},
reset: function (ms) {
var root = this;
if(root.timer) {
clearInterval(root.timer); // THIS DOES NOT WORK
} else {
console.log('timer not exist!!!!'); // ALWAYS END UP HERE. WHY?
}
/* .... stuff ... */
},
countdownComplete: function() { }
};
// Setting up click events to create instances of the countdownTimer
$(function () {
var thisPageCountdown = 4000;
$('[data-countdown]').on('click', '[data-countdown-start], [data-countdown-reset]', function () {
var $this = $(this);
var $wrap = $this.closest('[data-countdown]');
// create instance of countdownTimer
var myCountdown = Object.create(countdownTimer);
if ($this.is('[data-countdown-start]')) {
$this.hide();
$('[data-countdown-reset]', $wrap).css('display', 'block');
myCountdown.$wrap = $wrap;
myCountdown.start(thisPageCountdown);
// myCountdown.countdownComplete = function() {
// alert("Updated Callback!");
// };
}
if ($this.is('[data-countdown-reset')) {
$this.hide();
$('[data-countdown-start]', $wrap).css('display', 'block');
// RESET CALLED HERE BUT DOESN'T WORK RIGHT. SAYS myCountdown.timer IS STILL null. WHY?
myCountdown.reset(thisPageCountdown);
}
});
});

When you use var myCountdown = Object.create(countdownTimer); inside of your click function callback you are scoping it only to that callback and once the callback has executed it is garbage collected. You need to only create one instance of the countdownTimer, and it should be outside of your click event handler.
var thisPageCountdown = 4000;
// create instance of countdownTimer
var myCountdown = Object.create(countdownTimer);
$('[data-countdown]').on('click', '[data-countdown-start], [data-countdown-reset]', function () {
var $this = $(this);
var $wrap = $this.closest('[data-countdown]');

TL;DR You can fix your issue by avoiding use of the keyword this in static methods.
When you use the keyword this in a static javascript method, it refers to the item before the last dot from the call point. Example:
foo.bar(); // inside, this will refer to foo
foo.bar.foobar(); //inside, this will refer to foo.bar
var a = foo.bar.foobar();
a(); //this will refer to either null or window - oops
To prevent this behavior, you should always use the fully qualified name reference in static methods instead of relying on the this keyword.
Example from above:
reset: function (ms) {
//var root = this; // don't do this
if(countdownTimer.timer) {
clearInterval(countdownTimer.timer);
} else {
console.log('timer not exist!!!!');
}
/* .... stuff ... */
}

Javascript prototypal inheritance prototype function call

Have a question about calling one prototype function in another prototype function.
for instance lets say I have a basic slider with two prototype functions.
function Slider() {
}
Slider.prototype.transition = function() {
}
Slider.prototype.setTargets = function() {
}
What is the proper way of calling the setTargets function inside of the transition function so something like this:
Slider.prototype.transition = function() {
this.target.fadeOut('normal', function() {
// call setTargets?
this.setTargets(); // errors when i do this
});
}
thanks for the help

If this.target is an jQuery Object the callback of fadeOut will be called with this as the DOMNode.
Do this instead:
Slider.prototype.transition = function() {
var me = this;
this.target.fadeOut('normal', function() {
me.setTargets(); // <-- See me
});
}
I have chosen the name that me for all my initialized references to this. I never used that me for DomNodes, etc. makes sence for me.
Please see comments for furture views on this point.
EDIT:
Acually i used me not that - Dont know what im thinking ?? !
And for comment:
Slider.prototype.transition = function() {
var me = this;
this.target.fadeOut('normal', function() {
var domThis = this;
me.setTargets(); // <-- See me
setTimeout(function() {
// Use domThis [Dom Node]
}, 123);
});
}
Or:
You can make a jQuery object of this:
var $this = $(this);
me.setTargets(); // <-- See me
setTimeout(function() {
// Use $this [jQuery Object]
}, 123);
If you need the jQuery Object of this you can refer to: me.target
me.setTargets(); // <-- See me
setTimeout(function() {
// Use me.target [jQuery Object]
}, 123);

The fadeOut function is not called in the context of your slider object.
Slider.prototype.transition = function() {
var slider = this;
this.target.fadeOut('normal', function() {
// call setTargets?
slider.setTargets(); // should work now.
});
}

Throttle event calls in jQuery

I have a keyup event bound to a function that takes about a quarter of a second to complete.
$("#search").keyup(function() {
//code that takes a little bit to complete
});
When a user types an entire word, or otherwise presses keys rapidly, the function will be called several times in succession and it will take a while for them all to complete.
Is there a way to throttle the event calls so that if there are several in rapid succession, it only triggers the one that was most recently called?

Take a look at jQuery Debounce.
$('#search').keyup($.debounce(function() {
// Will only execute 300ms after the last keypress.
}, 300));

Here is a potential solution that doesn't need a plugin. Use a boolean to decide whether to do the keyup callback, or skip over it.
var doingKeyup = false;
$('input').keyup(function(){
if(!doingKeyup){
doingKeyup=true;
// slow process happens here
doingKeyup=false;
}
});

You could also use the excellent Underscore/_ library.
Comments in Josh's answer, currently the most popular, debate whether you should really throttle the calls, or if a debouncer is what you want. The difference is a bit subtle, but Underscore has both: _.debounce(function, wait, [immediate]) and _.throttle(function, wait, [options]).
If you're not already using Underscore, check it out. It can make your JavaScript much cleaner, and is lightweight enough to give most library haters pause.

Here's a clean way of doing it with JQuery.
/* delayed onchange while typing jquery for text boxes widget
usage:
$("#SearchCriteria").delayedChange(function () {
DoMyAjaxSearch();
});
*/
(function ($) {
$.fn.delayedChange = function (options) {
var timer;
var o;
if (jQuery.isFunction(options)) {
o = { onChange: options };
}
else
o = options;
o = $.extend({}, $.fn.delayedChange.defaultOptions, o);
return this.each(function () {
var element = $(this);
element.keyup(function () {
clearTimeout(timer);
timer = setTimeout(function () {
var newVal = element.val();
newVal = $.trim(newVal);
if (element.delayedChange.oldVal != newVal) {
element.delayedChange.oldVal = newVal;
o.onChange.call(this);
}
}, o.delay);
});
});
};
$.fn.delayedChange.defaultOptions = {
delay: 1000,
onChange: function () { }
}
$.fn.delayedChange.oldVal = "";
})(jQuery);

Two small generic implementations of throttling approaches. (I prefer to do it through these simple functions rather than adding another jquery plugin)
Waits some time after last call
This one is useful when we don't want to call for example search function when user keeps typing the query
function throttle(time, func) {
if (!time || typeof time !== "number" || time < 0) {
return func;
}
var throttleTimer = 0;
return function() {
var args = arguments;
clearTimeout(throttleTimer);
throttleTimer = setTimeout(function() {
func.apply(null, args);
}, time);
}
}
Calls given function not more often than given amount of time
The following one is useful for flushing logs
function throttleInterval(time, func) {
if (!time || typeof time !== "number" || time < 0) {
return func;
}
var throttleTimer = null;
var lastState = null;
var eventCounter = 0;
var args = [];
return function() {
args = arguments;
eventCounter++;
if (!throttleTimer) {
throttleTimer = setInterval(function() {
if (eventCounter == lastState) {
clearInterval(throttleTimer);
throttleTimer = null;
return;
}
lastState = eventCounter;
func.apply(null, args);
}, time);
}
}
}
Usage is very simple:
The following one is waiting 2s after the last keystroke in the inputBox and then calls function which should be throttled.
$("#inputBox").on("input", throttle(2000, function(evt) {
myFunctionToThrottle(evt);
}));
Here is an example where you can test both: click (CodePen)

I came across this question reviewing changes to zurb-foundation. They've added their own method for debounce and throttling. It looks like it might be the same as the jquery-debounce #josh3736 mentioned in his answer.
From their website:
// Debounced button click handler
$('.button').on('click', Foundation.utils.debounce(function(e){
// Handle Click
}, 300, true));
// Throttled resize function
$(document).on('resize', Foundation.utils.throttle(function(e){
// Do responsive stuff
}, 300));

Something like this seems simplest (no external libraries) for a quick solution (note coffeescript):
running = false
$(document).on 'keyup', '.some-class', (e) ->
return if running
running = true
$.ajax
type: 'POST',
url: $(this).data('url'),
data: $(this).parents('form').serialize(),
dataType: 'script',
success: (data) ->
running = false