jQuery, सरल मतदान उदाहरण

Question

मैं jQuery सीख रहा हूं, और मैं एक सरल कोड उदाहरण ढूंढने की कोशिश कर रहा हूं जो किसी शर्त के लिए एपीआई पोल करेगा। (यानी, हर कुछ सेकंड में एक वेबपेज का अनुरोध करें और परिणाम देखें)

मैं jQuery में AJAX कैसे करूं, से परिचित हूं, मैं इसे "टाइमर" पर निष्पादित करने का "उचित" तरीका नहीं ढूंढ सकता।

Answer 1

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

Comments

कुछ लोगों ने इस्तेमाल किया है setTimeoutऔर कुछ ने इस्तेमाल किया है setInterval। किसी दूसरे को क्यों पसंद किया जाएगा?

— माइक

setinterval हर 5 सेकंड में एक अजाक्स कॉल करेगा चाहे कोई भी हो। जिस तरह से यह लिखा है (जो मुझे लगता है कि अच्छा अभ्यास है) परिणाम के लिए इंतजार करेंगे 5 सेकंड बाद एक और अजाक्स अनुरोध करें। ऐसे समय होते हैं जब मैं सेटर्निवल का उपयोग करता हूं, लेकिन यह उनमें से एक नहीं है। अंतिम अनुरोध से परिणाम प्राप्त होने तक हमें कोई नया अनुरोध नहीं करना चाहिए

— जॉनी क्रेग

कृपया सावधान रहें कि यदि एक भी अनुरोध विफल रहता है तो सुझाया गया कोड मतदान रोक देगा। एक विशिष्ट परिदृश्य में आप शायद वैसे भी मतदान जारी रखना चाहेंगे। मैं सफलता हैंडलर केsetTimeout भीतर नहीं होता, बल्कि हमेशा jQuery के साथ ajax कॉल श्रृंखला । इस तरह: $.post('ajax/test.html') .done(function(data) { /* process */ }) .always(function() { setTimeout(doPoll, 5000); });

— Mårten Wikström

कोई पूंछ कॉल अनुकूलन नहीं है। यह सिर्फ फ़ंक्शन कॉल स्टैक को बढ़ाता रहेगा। Trampoline पैटर्न का उपयोग करने की सिफारिश की जाती है।

— बोपौती राजा

@BoopathiRajaa कृपया ऐसे trampoline पैटर्न का एक उदाहरण प्रदान करें।

— संता

Answer 2

यहां jQuery का उपयोग करके लंबे मतदान (लंबे समय से आयोजित HTTP अनुरोध) पर एक उपयोगी लेख है । इस लेख से प्राप्त एक कोड स्निपेट:

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

यह अजाक्स अनुरोध पूरा होने के बाद ही अगला अनुरोध करेगा।

उपरोक्त एक भिन्नता जो प्रतीक्षा / टाइमआउट अंतराल को सम्मानित करने से पहले तुरंत पहली बार निष्पादित की जाएगी।

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

Comments

क्या मतदान को रद्द करने, या इसे रोकने के लिए संकेत देने का कोई तरीका है?

— ताल

यदि सर्वर से अपेक्षित परिणाम प्राप्त होता है, तो मैं समय समाप्त कैसे करूँ?

— abhishek77in

आप इन उदाहरणों में टाइमआउट को स्पष्ट कर सकते हैं: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); } })();

— Marius

ऊपर दिए गए techoctave.com लिंक पर क्लिक न करें। हर तरह की गन्दी हरकत करने की कोशिश करता है

— सिद्धार्थ राम

Answer 3

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

• पुनरावृत्ति का उपयोग नहीं करता है (फ़ंक्शन स्टैक प्रभावित नहीं होता है)।
• जहां सेटटाइम-रिकर्सियन को टेल-कॉल अनुकूलित करने की आवश्यकता होती है, वहां पीड़ित नहीं होता है।

Comments

ES6 समाधान देखकर अच्छा लगा!

— 18

क्या यह एक ES6 समाधान Boopathi राजा, setInterval () बनाता है?

— हलील

Answer 4

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

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

Comments

नोट: आप इस वाक्यविन्यासsetInterval(poll, 5000);

— R3tep

Answer 5

function make_call()
{
  // do the request

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

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

Answer 6

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
    }

यह एक सुंदर दृष्टिकोण है, लेकिन कुछ गोटे हैं ...

• यदि आप then()तुरंत नहीं गिरना चाहते हैं , तो कॉलबैक को एक और उपयोगी वस्तु (शायद दूसरी Deferred) वापस करनी चाहिए , जो नींद और अजाक्स दोनों लाइनें करती हैं।
• दूसरों को स्वीकार करने के लिए बहुत शर्मनाक हैं। :)

Comments

इसी तरह के उत्तर: थोड़ी देर के लूप में आस्थगित

— ब्रेंट ब्रैडबर्न

मेरी "पुनरावृत्ति पुनरावृत्ति" टिप्पणी थोड़ी भ्रामक हो सकती है। अनाम कॉलबैक से "पुनरावर्ती" कॉल होने के बाद से यहां कोई वास्तविक पुनरावर्तन नहीं हुआ है - जो initiate_pollingपूरा होने के बाद चला गया है।

— ब्रेंट बर्नबर्न

नवीनतम ब्राउज़रों में, आपको अब jQuery की आवश्यकता नहीं है - ऐसा करने के लिए मेरा जवाब यहां देखें: stackoverflow.com/a/48728503/86967

— ब्रेंट ब्रैडबर्न

शुद्ध जावास्क्रिप्ट टाइमआउट:new Promise( resolve => setTimeout(resolve,1000) ).then( () => alert("done") )

— ब्रेंट बर्नबर्न

Async पुनरावृत्ति Iteration है

— ब्रेंट बर्नबर्न

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

Answer 8

मैंने इसके लिए एक छोटा JQuery प्लगइन बनाया। आप इसे आजमा सकते हैं:

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

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

Answer 9

यह समाधान:

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