jQuery, simple polling example

I'm learning jQuery, and I'm trying to find a simple code example that will poll an API for a condition. (ie, request a webpage every few seconds and process the results)

I'm familiar with how to do AJAX in jQuery, I just can't seem to find the "proper" way of getting it to execute on a "timer".

function doPoll(){
    $.post('ajax/test.html', function(data) {
        alert(data);  // process results here
        setTimeout(doPoll,5000);
    });
}

Here's a (archive.org mirror of a) helpful article on long polling (long-held HTTP request) using jQuery. A code snippet derived from this article:

(function poll() {
    setTimeout(function() {
        $.ajax({
            url: "/server/api/function",
            type: "GET",
            success: function(data) {
                console.log("polling");
            },
            dataType: "json",
            complete: poll,
            timeout: 2000
        })
    }, 5000);
})();

This will make the next request only after the ajax request has completed.

A variation on the above that will execute immediately the first time it is called before honouring the wait/timeout interval.

(function poll() {
    $.ajax({
        url: "/server/api/function",
        type: "GET",
        success: function(data) {
            console.log("polling");
        },
        dataType: "json",
        complete: setTimeout(function() {poll()}, 5000),
        timeout: 2000
    })
})();

From ES6,

var co = require('co');
var $ = require('jQuery');

// because jquery doesn't support Promises/A+ spec
function ajax(opts) {
  return new Promise(function(resolve, reject) {
    $.extend(opts, {
      success: resolve,
      error: reject
    });
    $.ajax(opts);
  }
}

var poll = function() {
  co(function *() {
    return yield ajax({
      url: '/my-api',
      type: 'json',
      method: 'post'
    });
  }).then(function(response) {
    console.log(response);
  }).catch(function(err) {
    console.log(err);
  });
};

setInterval(poll, 5000);

• Doesn't use recursion (function stack is not affected).
• Doesn't suffer where setTimeout-recursion needs to be tail-call optimized.

function poll(){
    $("ajax.php", function(data){
        //do stuff  
    }); 
}

setInterval(function(){ poll(); }, 5000);

function make_call()
{
  // do the request

  setTimeout(function(){ 
    make_call();
  }, 5000);
}

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

jQuery.Deferred() can simplify management of asynchronous sequencing and error handling.

polling_active = true // set false to interrupt polling

function initiate_polling()
    {
    $.Deferred().resolve() // optional boilerplate providing the initial 'then()'
    .then( () => $.Deferred( d=>setTimeout(()=>d.resolve(),5000) ) ) // sleep
    .then( () => $.get('/my-api') ) // initiate AJAX
    .then( response =>
        {
        if ( JSON.parse(response).my_result == my_target ) polling_active = false
        if ( ...unhappy... ) return $.Deferred().reject("unhappy") // abort
        if ( polling_active ) initiate_polling() // iterative recursion
        })
    .fail( r => { polling_active=false, alert('failed: '+r) } ) // report errors
    }

This is an elegant approach, but there are some gotchas...

• If you don't want a then() to fall through immediately, the callback should return another thenable object (probably another Deferred), which the sleep and ajax lines both do.
• The others are too embarrassing to admit. :)

I created a tiny JQuery plugin for this. You may try it:

$.poll('http://my/url', 100, (xhr, status, data) => {
    return data.hello === 'world';
})

https://www.npmjs.com/package/jquerypoll

This solution:

1. has timeout
2. polling works also after error response

Minimum version of jQuery is 1.12

$(document).ready(function () {
  function poll () {
    $.get({
      url: '/api/stream/',
      success: function (data) {
        console.log(data)
      },
      timeout: 10000                    // == 10 seconds timeout
    }).always(function () {
      setTimeout(poll, 30000)           // == 30 seconds polling period
    })
  }

  // start polling
  poll()
})

(function poll() {
	setTimeout(function() {
		//
		var search = {}
		search["ssn"] = "831-33-6049";
		search["first"] = "Harve";
		search["last"] = "Veum";
		search["gender"] = "M";
		search["street"] = "5017 Ottis Tunnel Apt. 176";
		search["city"] = "Shamrock";
		search["state"] = "OK";
		search["zip"] = "74068";
		search["lat"] = "35.9124";
		search["long"] = "-96.578";
		search["city_pop"] = "111";
		search["job"] = "Higher education careers adviser";
		search["dob"] = "1995-08-14";
		search["acct_num"] = "11220423";
		search["profile"] = "millenials.json";
		search["transnum"] = "9999999";
		search["transdate"] = $("#datepicker").val();
		search["category"] = $("#category").val();
		search["amt"] = $("#amt").val();
		search["row_key"] = "831-33-6049_9999999";

		

		$.ajax({
			type : "POST",
			headers : {
				contentType : "application/json"
			},
			contentType : "application/json",
			url : "/stream_more",
			data : JSON.stringify(search),
			dataType : 'json',
			complete : poll,
			cache : false,
			timeout : 600000,
			success : function(data) {
				//
				//alert('jax')
				console.log("SUCCESS : ", data);
				//$("#btn-search").prop("disabled", false);
				// $('#feedback').html("");
				for (var i = 0; i < data.length; i++) {
					//
					$('#feedback').prepend(
							'<tr><td>' + data[i].ssn + '</td><td>'
									+ data[i].transdate + '</td><td>'
									+ data[i].category + '</td><td>'
									+ data[i].amt + '</td><td>'
									+ data[i].purch_prob + '</td><td>'
									+ data[i].offer + '</td></tr>').html();
				}

			},
			error : function(e) {
				//alert("error" + e);

				var json = "<h4>Ajax Response</h4><pre>" + e.responseText
						+ "</pre>";
				$('#feedback').html(json);

				console.log("ERROR : ", e);
				$("#btn-search").prop("disabled", false);

			}
		});

	}, 3000);
})();