CODEWITHSUNDEEP
javascriptjqueryajax
Vanshaj Behl
Vanshaj Behl

Reputation: 143

callback function with setInterval without any argument

I have the following script which does an ajax call once and after that it does ajax call to another url after every second. I implemented the following code but I think I am not able to fix this callback issue to run the second function.

$(document).ready(function(){
    ajaxSingleCall(function(){
        ajaxCalls();
    });
});

function ajaxSingleCall(){
    $.ajax({
        type: 'GET',
        url: "/matchDataOdds",
        dataType: 'json'
        })
        .done(function(data) {
            data.forEach(addOddsCanvas);
        })
        .fail(function() {
            console.log("Ajax failed to fetch data");
        });
}

function ajaxCalls(){
    setInterval(runner, 1000);
}

function runner() {
    // run your ajax call here
    $.ajax({
    type: 'GET',
    url: "/matchData",
    dataType: 'json'
    })
        .done(function(data) {
            liveFeed(data);
        })
        .fail(function() {
            console.log("Ajax failed to fetch data");
        });
}

Upvotes: 0

Views: 106

Answers (4)

mplungjan
mplungjan

Reputation: 178328

I highly recommend to NOT use setInterval with AJAX. If the server is slow to return, you may start hammering the server with calls upon calls. If you use the done or complete, the server has returned as fast as it could.

Instead put the runner in the done of ajaxSingleCall and then use setTimeout in the done of runner

Note: Your code failed because you did not execute the passed callback in ajaxSingleCall

$(function() {
  ajaxSingleCall(); // not taking any parameters anyway...
});

function ajaxSingleCall() {
  $.ajax({
      type: 'GET',
      url: "/matchDataOdds",
      dataType: 'json'
    })
    .done(function(data) {
      data.forEach(addOddsCanvas);
      runner();
    })
    .fail(function() {
      console.log("Ajax failed to fetch data");
    });
}

function runner() {
  // run your ajax call here
  $.ajax({
      type: 'GET',
      url: "/matchData",
      dataType: 'json'
    })
    .done(function(data) {
      liveFeed(data);
      setTimeout(runner, 1000);
    })
    .fail(function() {
      console.log("Ajax failed to fetch data");
    });
}

Upvotes: 2

JLRishe
JLRishe

Reputation: 101738

You're passing a callback function into ajaxSingleCall, but it doesn't accept any parameters. You have to actually use the function that's passed. It won't be called automatically:

function ajaxSingleCall(callback){
    $.ajax({
        type: 'GET',
        url: "/matchDataOdds",
        dataType: 'json'
    })
    .done(function(data) {
        data.forEach(addOddsCanvas);
        callback();
    })
    .fail(function() {
        console.log("Ajax failed to fetch data");
    });
}

Upvotes: 2

Xiaosu
Xiaosu

Reputation: 615

ajaxCalls() will not get called because ajaxSingleCall function does not take any parameter.

Upvotes: 0

Gustaf Gunér
Gustaf Gunér

Reputation: 2267

Try calling it from inside ajaxSingleCall() instead. I've edited your code below.

$(document).ready(function(){
    ajaxSingleCall();
});

function ajaxSingleCall(){
    $.ajax({
        type: 'GET',
        url: "/matchDataOdds",
        dataType: 'json'
        })
        .done(function(data) {
            data.forEach(addOddsCanvas);
            ajaxCalls(); // <-- here
        })
        .fail(function() {
            console.log("Ajax failed to fetch data");
        });
}

function ajaxCalls(){
    setInterval(runner, 1000);
}

function runner() {
    // run your ajax call here
    $.ajax({
    type: 'GET',
    url: "/matchData",
    dataType: 'json'
    })
        .done(function(data) {
            liveFeed(data);
        })
        .fail(function() {
            console.log("Ajax failed to fetch data");
        });
}

Upvotes: 1

Related Questions