We Keep Coding

setInterval fires Ajax call twice every time

I have the following JS code:
var delay = 5000;
function init() {
setInterval(getFileCount, delay);
}
function getFileCount() {
$.get('/notification/course-file-count', function(response) {
if (response.items.length === 0) {
return false;
}
// Do stuff with response
});
}
On page load I'm calling the init() function. The idea is to start the interval and call the getFileCount() function every 5 seconds.
So, the interval waits 5s after the page loads and runs, but it always makes the Ajax call twice.
What am I missing?
UPDATE:
I know the init() function is triggered twice on page load (thanks to the comment by Yury Tarabanko). I don't quite understand, why. The almost-full code:
$(function() {
'use strict';
function handleCourseNotification() {
var delay = 5000;
function init() {
setInterval(getFileCount, delay);
}
function getFileCount() {
$.get('/notification/course-file-count', function(response) {
if (response.items.length === 0) {
return false;
}
updateCourseList(response.items);
});
}
function updateCourseList(items) {
// update course list...
}
return {
init: init
};
}
if ($('#js-auth-course-list').length) {
var notificationHandler = handleCourseNotification();
notificationHandler.init();
}
});
It's a small module, which I initialize after page load, if a specific element is available in the DOM - $('#js-auth-course-list'). Why is init called 2 times actually? I directly call it once.

In general, it is not a good idea to call asynchronous calls inside a setInterval() because you do not know the exact response time. So, you could end up calling the second async function before the response from the first call has returned.
You can try with setTimeout() like this:
var delay = 5000;
var async = function() {
$.get('/notification/course-file-count', function(response) {
if (response.items.length === 0) {
return false;
}
// Do stuff with response
// Call the async function again
setTimeout(function() {
async();
}, delay);
});
}
async();

How to make my JS callback work right?

I have the following problem:
I'm trying to implement a Callback in JavaScript. Now I just made it with a global variable which holds my callbacl function. Here is the example:
_callbackFkt = null;
requestCompleted = function(oControlEvent) {
console.log("Callback: " + _callbackFkt.toString());
};
myLibRequest = function(callback) {
// some code, which is attached to the requestComplete event when ready
_callbackFkt = callback;
};
Now I try to call the functions which use the callback:
myLibRequest(function () {
// callback function 1
});
myLibRequest(function () {
// callback function 2
});
myLibRequest(function () {
// callback function 3
});
the result in the console is:
Callback: function () {
// callback function 3
}
How can I define the callback to be bound to one function call and not global available? I want the result:
Callback: function () {
// callback function 1
}
Callback: function () {
// callback function 2
}
Callback: function () {
// callback function 3
}

There are several ways to do what you are trying to do, but your basic problem is that you want a list of event handlers, but you are only assigning a single value.
To modify what you are currently doing:
_callbackFkts = [];
myLibRequest = function(callback) {
// some code, which is attached to the requestComplete event when ready
_callbackFkts.push(callback);
};
Then, when you want to execute the callbacks:
_callbackFkts.forEach(function(callbackFkt) {
callbackFkt();
});
But, this global mechanism is a bit messy. You might consider some encapsulation (untested, but you get the idea):
function Events() {
this.callbacks = [];
}
Events.protototype.bind = function(callback) {
this.callbacks.push(callback);
};
Events.prototype.executeAll = function(params) {
this.callbacks.forEach(function(callback) {
callback.apply(this, params);
}
}
Then you can use it like this:
var events = new Events();
events.bind(function() {
//callback function 1
});
events.bind(function() {
//callback function 2
});
events.bind(function() {
//callback function 3
});
events.executeAll('with', 'parameters');
Finally, you might just use an off-the-shelf event library. There are lots. One quick google search finds this.

Having a global as the callback will only work if myLibRequest() contains only synchronous code (which I assume it doesn't).
Remove the global, and use the callback that is passed in as an argument.
Assuming you have some async call in there, and you call requestCompleted when it's done. Add an argument so requestCompleted receives the callback, instead of referenceing the global.
requestCompleted = function(oControlEvent, callback) {
console.log("Callback: " + callback.toString());
};
myLibRequest = function(callback) {
myAsyncFunction(function(){
// async complete
requestCompleted('event', callback);
});
};

jQuery/JavaScript - Start one function once another has finished?

What is the best way to fire a function once another has finished?
At the moment I have 6 functions that I'm calling on DOM load like this:
$(document).ready(function(){
func1();
func2();
func3();
func4();
func5();
func6();
});
function func1(){
do some stuff
}
function func2(){
do some stuff
}
function func3(){
do some stuff
}
function func4(){
do some stuff
}
function func5(){
do some stuff
}
function func6(){
do some stuff
}
But I want them to fire one after another. How would I do this?
Thanks in advance

Try by using callbacks like,
$(document).ready(function(){
func1(func2);
});
function func1(callback){
do some stuff
callback('func2');
}
function func2(callback){
do some stuff
callback('func3');
}
function func3(callback){
do some stuff
callback('func4');
}
function func4(callback){
do some stuff
callback('func5');
}
function func5(callback){
do some stuff
callback('func6');
}
function func6(callback){
do some stuff
}
Read callback-functions-javascript
You can refer Is there a better way to do callback chaining in javascript? for chained callbacks
function func1(){
do some stuff
_next();
}
function func2(){
do some stuff
_next();
}
function func3(){
do some stuff
_next();
}
function func4(){
do some stuff
_next();
}
function func5(){
do some stuff
_next();
}
function func6(){
do some stuff
_next();
}
function chainCallbacks() {
var _this = this;
var _counter = 0;
var _callbacks = arguments;
var _next = function() {
_counter++;
if(_counter < _callbacks.length) {
_callbacks[_counter].apply(_this);
}
};
_this._next = _next;
return function() {
if(_callbacks.length > 0) {
_callbacks[0].apply(_this);
}
};
}
var queue = chainCallbacks(func1, func2, func3,func4,func5,func6);
queue();

The way you wrote it is correct for synchronous code. However, based on your comment it sounds like you are firing off external requests that run asynchronously. What happens in this case is that function1 may fire off some code accessing Sharepoint and then will complete the rest of the code in function 1 after that...and then flow right into function2 without waiting to see what happens with the Sharepoint request.
My preferred way of dealing with this would be using callbacks from the asynchronous operations. Once you pull that data from Sharepoint, for instance, you are going to call some other function (we'll call it Sharepoint_callback1). Add a call to that function:
$(document).ready(function(){
func1();
});
function func1(){
do some stuff that calls Sharepoint, which after complete calls Sharepoint_callback1
}
function func2(){
do some stuff
}
function Sharepoint_callback1() {
do some stuff
func2();
}
There are other methods of doing this. JQuery provides callback handlers for almost of its operations, but it all essentially boils down to the same thing as above.
If I misunderstood the question I apologize; please post additional details and I'll modify my answer.

You could write a queue function. For queue of functions you can use array:
var fn1 = function() {},
fn2 = function() {},
MyQ = [];
//add functions to array
MyQ.push(fn1);
MyQ.push(fn2);
//remove and call the first item of an array
(MyQ.shift())();
If you want use your function with scope and arguments, you can wrap functions, for example:
MyFnWithParam = function(fn, scope, params){
scope = scope || window;
params = params || [];
return function() {fn.apply(scope, params)};
};
var fn1 = MyFnWithParam(fn, this, params),
fn2 = MyFnWithParam(fn, this, params),
MyQ = [];
MyQ.push(fn1);
MyQ.push(fn2);
while (MyQ.length > 0) {
(MyQ.shift())();
}

Proper explanation of JavaScript execution order

I know there are lots of question on this subject, but all of them are tailored to a specific case. I'm asking this question and hoping for an answer that everyone can use when looking into this matter.
Say I have three functions that need to be executed in order, and they all do something async.
For two functions it's simple with a callback:
var fOne = function(callback) {
// do stuff
callback();
};
var fTwo = function() {
// do stuff
};
Calling:
fOne(fTwo);
Makes fTwo to be run after fOne is complete. How does one add fThree into this case so that it is run after fTwo, which is run after fOne?

Basically, if I understand your question right, you'll want to pass a lambda to fOne in order to be able to add arguments to fTwo, then have fTwo collect the callback and call it like fOne does.
var fOne = function(callback) {
// do stuff
callback();
};
var fTwo = function(callback) {
// do stuff
callback();
};
var fThree = function() {
// do stuff
};
fOne(function() { fTwo(fThree); }); // <- lambda

Since you're not using deferred and promises to run simultaneous asyncronous actions, but rather just starting one when the other has completed, adding a third goes pretty much the same way:
var fOne = function(callback) {
console.log('1')
callback();
};
var fTwo = function(callback) {
console.log('2')
callback();
};
var fThree = function() {
console.log('3')
};
fOne(function() {
fTwo(function() {
fThree();
});
});
FIDDLE

One more approach I came up with:
var stack = [fOne, fTwo, fThree];
stack.shift()(function() {
stack.shift()(stack[0]);
});
Where you define your functins as:
function fOne(callback) {
setTimeout(function() { // <-- example of async task
alert('fOne done');
callback && callback();
}, 1000);
}
http://jsfiddle.net/kRMr8/2/

Ajax call back function scope & chaining Ajax request with callback

Ok. here's the scenario:
function DataFeed(){
function PopulateData()
{
$('div#example').load('http://www.example.com', fxnCallBack);
};
function fxnCallBack()
{
PopulateData();
}
this.activator = function() {
PopulateData();
}
};
var example_obj = new DataFeed;
example_obj.activator();
In the above code, the ajax .load gets executed once, then callback executes. But the callback doesn't start the ajax function again?
Thanks in advance.
edit- why doesn't it display new line properly -.-

InternalError: too much recursion
JavaScript engines normally have a max limit in the number of recursions or the time recursive execution may take. Use setInterval instead:
function DataFeed() {
var interval;
function PopulateData() {
$('div#example').load('http://www.example.com', function(data) {
if(data == "clear_interval")
interval = clearInterval(interval); // clear the interval
});
}
this.activator = function() {
interval = setInterval(PopulateData, 1000); // run every second
};
}
var example_obj = new DataFeed();
example_obj.activator();