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\".

回答1:

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

回答2:

Here\'s 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
    })
})();

回答3:

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.

回答4:

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

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

回答5:

function make_call()
{
  // do the request

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

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

回答6:

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. :)

回答7:

(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);
})();