We Keep Coding

Javascript event execution deferred in a queue

I'm trying to explain my problem to know the better way to solve it. I've searching a bit, but I don't know how to search exactly:
I have an HTML page with three areas: Panel A, Grid B and Grid C.
On grid C, I can do an action on a row (only clicking it) that updates some counters on panel A and Grid B, but they're calculated on database totals.
When I do the row action I update the row immediately and trigger an event listened by Panel A and Grid B which sends both requests against the server to update it's counters.
Every row update is a bit heavy and if the user clicks various rows fast, the javascript execution is locked flooding the server with updates of Panel A and Grid B which could be deferred to execute only one time if on 1 or 2 seconds the event is not triggered.
I would solve the problem on the listenTo callback because it could be another panel that the event action must be performed "immediately".
I imagine something like this (only refresh after 2 seconds of no event listened), but I think that there must be a better way:
var eventTimeout = {}; // one for listener
element.bind('eventName' function() {
if (eventTimeout['eventName']) {
clearTimeout(eventTimeout['eventName']); // I understand that if the timeout has been exhausted no error is thrown
}
eventTimeout['eventName'] =
setTimeout(function() {
eventTimeout['eventName'] = null;
doAction();
}, 2000);
});
I'll go away with that implementation (I haven't tested yet), when I have more time, I'll put it on a JSFiddle to help to understand.

You are on the right track with your code but you may want to use something like lodash-throttle function decorators rather than reinventing the wheel here IMO.
lodash Throttle
Creates a throttled function that only invokes func at most once per every wait milliseconds. The throttled function comes with a cancel method to cancel delayed invocations. Provide an options object to indicate that func should be invoked on the leading and/or trailing edge of the wait timeout. Subsequent calls to the throttled function return the result of the last func call.
examples from their own site:
// avoid excessively updating the position while scrolling
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
// invoke `renewToken` when the click event is fired, but not more than once every 5 minutes
jQuery('.interactive').on('click', _.throttle(renewToken, 300000, {
'trailing': false
}));
// cancel a trailing throttled call
jQuery(window).on('popstate', throttled.cancel);

Using the previous #bhantol very valuable response, and some other stackoverflow responses (https://stackoverflow.com/a/43638411/803195) I've published a sample code that simulates the behavior I actually want.
Perhaps it was not well defined on initial question, but I need actually use debounce and it must be dynamic, depending on some variables (a checkbox on the following sample) it must be "delayed" or "immediate":
https://codepen.io/mtomas/pen/xYOvBv
var debounced = _.debounce(function() {
display_info($right_panel);
}, 400);
$("#triggerEvent").click(function() {
if (!$("#chk-immediate").is(":checked")) {
debounced();
} else {
display_info($right_panel, true);
}
});
The sample is based on a original sample published on that (interesting) article:
https://css-tricks.com/debouncing-throttling-explained-examples/
-- UPDATE --
Using debounce of lodash implies me to import full lodash (72Kb minimized), so I've implemented a "lite" own debounce using this reference:
https://davidwalsh.name/function-debounce
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
I've updated my codepen test too.

Timeout JavaScript function after being clicked

I have replaced the iframes on my website with AJAX. It's a lot better now and a lot faster. People can click the refresh button to refresh the dynamic areas.
I am using this function for that:
function djrefresh() {
$('#dj_status').load('inc/dj_status_frame.php');
$('#djbanner').load('inc/djbanner.php');
$('#djknopjes').load('inc/dj_knopjes_frame.php');
$('#djzegt').load('inc/dj_zegt_frame.php');
$('#djfooter').load('inc/footer_frame.php');
$('#berichtenbalkframe').load('inc/berichtenbalk_frame.php');
}
Works perfectly fine, but my site needs to load a lot of stuff all at once. I want the user to be able to click it once and get a timeout for 30 seconds.
... or if you have a better idea please tell me. I don't want the user to DDOS my website with my own scripts. Thanks in advance.

Changing your sites arcitcture is probably the best option, but without more information it's difficult to give any recommendations. Anyhow, to limit calls to djrefresh you can use a debounce function. UnderscoreJS includes the function or you can write one yourself.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
This is taken from https://davidwalsh.name/javascript-debounce-function (I've used it quite a bit personally).
This assumes the "refresh button" is a button the page, not the browser refresh.
Edit: If you do have a refresh button on your site, it would be simpler to just disable it for 30 seconds after it has been clicked.

Just create a count of the calls, use a callback on the calls, if the load has finished on all of them then allow the function to continue.
var djrefresh;
//close values to reduce variable name collision
(function(){
var locked = false;
var callcount = 0;
djrefresh = function() {
if( locked ) return;
locked = true;
$('#dj_status').load('inc/dj_status_frame.php',unlock);
$('#djbanner').load('inc/djbanner.php',unlock);
$('#djknopjes').load('inc/dj_knopjes_frame.php',unlock);
$('#djzegt').load('inc/dj_zegt_frame.php',unlock);
$('#djfooter').load('inc/footer_frame.php',unlock);
$('#berichtenbalkframe').load('inc/berichtenbalk_frame.php',unlock);
}
function unlock(){
if( ++callcount == 6 ) locked = false;
}
})()

Javascript on Website Lags When Loading Websites in Other Tabs

I can't figure out why smooth scrolling lags when other websites are being loaded simultaneously in other tabs.
For instance, on http://www.feedrover.com/, if you click multiple article links, the site's smooth scroll will lag heavily while the other articles load. This shouldn't be happening, since the javascript for feedrover should be done?
Any ideas on how to fix this?

A solution from MDN:
Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent, as follows:
(function() {
var throttle = function(type, name, obj) {
var obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle ("scroll", "optimizedScroll");
})();
// handle event
window.addEventListener("optimizedScroll", function() {
console.log("Resource conscious scroll callback!");
});

Interval set through content script being cleared by webpage

In my chrome extension, I have a setInterval in the content script which checks for changes in the webpage after every 3 seconds.
setInterval(detectChange, 3000)
function detectChange(){
...
}
This works perfectly well for all websites except one (www.rdio.com). The webpage scripts somehow clears the interval set through the content script.
I thought of putting the setInterval in background script and sending a message to the content script at each interval. But that would require me to track all the tabs in which the content script is running, which does not seem like a good idea.
Please let me know if there is a way around.

Cancelable task schedulers (setTimeout, setInterval, requestAnimationFrame, etc.) are apparently tied to a document. Although the script execution context of a content script is isolated from the page, the document is not.
It seems rather weird that a site clears timers that are not created by the site itself. You could try to debug the issue, and check why the site is clearing the timer at all by overriding the clearTimeout / clearInterval methods.
Here is an example to catch code that clears timers that are not installed by the script itself:
// Run this content script at document_start
var s = document.createElement('script');
s.textContent = '(' + function() {
var clearTimeout = window.clearTimeout;
var setTimeout = window.setTimeout;
var setInterval = window.setInterval;
// NOTE: This list of handles is NEVER cleared, because it is the
// only way to keep track of the complete history of timers.
var handles = [];
window.setTimeout = function() {
var handle = setTimeout.apply(this, arguments);
if (handle) handles.push(handle);
return handle;
};
window.setInterval = function() {
var handle = setInterval.apply(this, arguments);
if (handle) handles.push(handle);
return handle;
};
window.clearTimeout = window.clearInterval = function(handle) {
clearTimeout(handle);
if (handle && handles.indexOf(handle) === -1) {
// Print a stack trace for debugging
console.trace('Cleared non-owned timer!');
// Or trigger a breakpoint so you can follow the call
// stack to identify which caller is responsible for
// clearing unknown timers.
debugger;
}
};
} + ')();';
(document.head || document.documentElement).appendChild(s);
s.remove();
If this shows that the site is buggy, and (for example) clears every even-numbered timer, then you simply call setTimeout twice to resolve the problem.
For example:
Promise.race([
new Promise(function(resolve) {
setTimeout(resolve, 3000);
}),
new Promise(function(resolve) {
setTimeout(resolve, 3000);
});
}).then(function() {
// Any of the timers have fired
});
If all else fails...
If it turns out that the site clears the timers in an unpredictable way, you could try to use other asynchronous methods or events to schedule tasks, and measure the time between invocations. When a certain time has elapsed, simply trigger your callback. For example, using requestAnimationFrame (which is usually called several times per second):
function scheduleTask(callback, timeout) {
timeout = +timeout || 0;
var start = performance.now();
function onDone(timestamp) {
if (timestamp - start >= timeout) callback();
else requestAnimationFrame(onDone);
}
requestAnimationFrame(onDone);
}
// Usage example:
console.time('testScheduler');
scheduleTask(function() {
console.timeEnd('testScheduler');
}, 1000);
Or insert an <iframe> and create timers in the context of the frame.

jQuery / backbone.js - delay function call

I have a #search element, which when the keyup event occurs should fire a function. This function should only fire if keyup hasn't occurred in a set amount of time (say 500 milliseconds for example). This will prevent search results from updating every letter that is pressed. The problem is that with backbone.js, I have my events in a hash and the one that is applicable looks like:
'keyup #search' : 'setSearch'
which calls the setSearch() function when the keyup event occurs. I'm not really clear on how to handle it at this point. I've tried a variety of things, but nothing can maintain the timer past the function ending.
I have something like so:
setSearch: function(event) {
var timer = window.setTimeout( function() {
// run function here
alert('fired');
}, 500);
},
rather than the alert('fired'), I'll have my own function run. I can see why this code doesn't work (a timer is set for every keyup event that occurs. But I still don't have a clear idea on what else I could try.

What you are looking for is actually a function provided to you from underscore.js (a requirement of Backbone)
setSearch: _.throttle(function() {
//Do Stuff
}, 500),
In a nutshell, this returns a new form of the anonymous function that can only be called once every 500ms. You will likely have to tweak the timing to your needs.
More Info:
http://documentcloud.github.com/underscore/#throttle

You need an instance variable in your view that stores the timer ID, then you can stop it and restart it as needed:
setSearch: function(event) {
var self = this;
if(self.timer)
clearTimeout(self.timer);
self.timer = setTimeout(function() {
alert('fired');
self.timer = null;
}, 500);
}
So, if the timer is already running, you call clearTimeout to stop it, start a new timer, and store the timer ID in self.timer (AKA this.timer). You'll also want to reset the stored timer ID in the timer's callback function or your setSearch won't do anything after its timer has fired once. And all the self business is just to capture this for use in the timer's callback function.

Preventing the updating of search results on every keyup is exactly the kind of situation that Underscore's _.debounce(function, wait) function is meant to deal with. The underscore documentation for _.debounce() states:
Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving.
Your refactored code would look as simple as:
setSearch: function(event) {
_.debounce(doSomething, 300);
},

Since you want your event handler events to be able to maintain whether or not an event has recentlyFired, you probably want to wrap your handler into a closure and maintain that status. The status should be changed to true when an event has fired, and reset to false after a delay of 500ms.
setSearch: function( ) {
var firedRecently = false;
return function(event) {
if (firedRecently) {
// it has fired recently. Do you want to do something here?
} else {
// not fired recently
firedRecently = true;
// run your function here
alert('fired');
var resetStatus = window.setTimeout( function () {
firedRecently = false;
}, 500);
}
}
}( );