jQuery, простой пример опроса

105

Я изучаю jQuery и пытаюсь найти простой пример кода, который будет опрашивать API на предмет условия. (т.е. запрашивать веб-страницу каждые несколько секунд и обрабатывать результаты)

Я знаком с тем, как использовать AJAX в jQuery, я просто не могу найти «правильный» способ заставить его работать по «таймеру».

Майк
источник

Ответы:

140
function doPoll(){
    $.post('ajax/test.html', function(data) {
        alert(data);  // process results here
        setTimeout(doPoll,5000);
    });
}
Джонни Крейг
источник
4
некоторые люди использовали, setTimeoutа некоторые использовали setInterval. Почему одно предпочтительнее другого?
Mike
36
setinterval будет делать вызов ajax каждые 5 секунд, несмотря ни на что. способ написания (который я считаю хорошей практикой) будет ждать результатов, ТОГДА сделайте еще один запрос ajax через 5 секунд. бывают случаи, когда я бы использовал setinterval, но это не один из них. мы не должны делать никаких новых запросов, пока не получим результаты из последнего запроса
Джонни Крейг
108
Имейте в виду, что предлагаемый код прекратит опрос, если один запрос не будет выполнен. В типичном сценарии вы, вероятно, все равно захотите продолжить опрос. У меня не было бы setTimeoutв обработчике успеха, но вместо этого всегда связывайте вызов ajax с jQuery . Как это: $.post('ajax/test.html') .done(function(data) { /* process */ }) .always(function() { setTimeout(doPoll, 5000); });
Mårten Wikström
6
Оптимизация хвостового вызова отсутствует. Это просто продолжит увеличивать стек вызовов функций. Рекомендуется использование трамплина.
Boopathi Rajaa
8
@BoopathiRajaa, пожалуйста, приведите пример такой схемы батута.
Санта,
61

Вот полезная статья о длительном опросе (длительном HTTP-запросе) с использованием jQuery. Фрагмент кода, взятый из этой статьи:

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

Это сделает следующий запрос только после завершения запроса ajax.

Вариант вышеуказанного, который будет выполняться немедленно при первом вызове перед соблюдением интервала ожидания / тайм-аута.

(function poll() {
    $.ajax({
        url: "/server/api/function",
        type: "GET",
        success: function(data) {
            console.log("polling");
        },
        dataType: "json",
        complete: setTimeout(function() {poll()}, 5000),
        timeout: 2000
    })
})();
chrisjleu
источник
Есть ли способ отменить опрос или подать сигнал об остановке?
Tal
Как очистить таймаут, если ожидаемый результат получен от сервера?
abhishek77,
Вы можете очистить тайм-аут, как в этом примере:let is_success = false; (function poll() { let timeout = setTimeout(function() { $.ajax({ url: resp.location, type: "GET", success: function(data) { if(YOUR_CONDITION) { is_success=true; } }, dataType: "json", complete: poll, timeout: 2000 }) }, 5000); if(is_success) { console.log("ending poll"); window.clearTimeout(timeout); } })();
Мариус
2
Не переходите по ссылке techoctave.com выше. Пытается делать всевозможные гадости
Сиддхарт Рам,
13

Из 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);
  • Не использует рекурсию (не влияет на стек функций).
  • Не страдает там, где необходимо оптимизировать рекурсию setTimeout.
Boopathi Rajaa
источник
Приятно видеть решение ES6!
PHearst
Что делает его решением ES6 Boopathi Rajaa, setInterval ()?
Halil
11
function poll(){
    $("ajax.php", function(data){
        //do stuff  
    }); 
}

setInterval(function(){ poll(); }, 5000);
генезис
источник
3
Примечание: вы можете использовать этот синтаксисsetInterval(poll, 5000);
R3tep
7
function make_call()
{
  // do the request

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

$(document).ready(function() {
  make_call();
});
PeeHaa
источник
2

jQuery.Deferred () может упростить управление асинхронной последовательностью и обработкой ошибок.

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
    }

Это элегантный подход, но есть некоторые подводные камни ...

  • Если вы не хотите, чтобы a then()немедленно провалился , обратный вызов должен возвращать другой объект, который можно использовать (возможно, другой Deferred), что и делают строки sleep и ajax.
  • Остальные слишком стыдно признаться. :)
Брент Брэдберн
источник
Подобные ответы на: Отложенный в цикле while
Брент Брэдберн
Мой комментарий "итеративной рекурсии" может немного ввести в заблуждение. Фактической рекурсии здесь нет, поскольку «рекурсивный» вызов происходит из анонимного обратного вызова - после того, как initiate_pollingон завершился.
Брент Брэдберн
В последних версиях браузеров вам больше не нужен jQuery, сделайте это - см. Мой ответ здесь: stackoverflow.com/a/48728503/86967
Брент Брэдберн,
Тайм-аут чистого JavaScript:new Promise( resolve => setTimeout(resolve,1000) ).then( () => alert("done") )
Брент Брэдберн,
Асинхронная рекурсия - это итерация
Брент Брэдберн,
1

Это решение:

  1. имеет тайм-аут
  2. опрос работает и после ответа на ошибку

Минимальная версия jQuery - 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()
})
Jozo
источник
0
(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);
})();
Вакуар Хан
источник