jQuery, সাধারণ ভোটদানের উদাহরণ

Question

আমি jQuery শিখছি, এবং আমি একটি সাধারণ কোড উদাহরণ সন্ধান করার চেষ্টা করছি যা শর্তের জন্য একটি এপিআই পোল করবে। (যেমন, প্রতি কয়েক সেকেন্ডে একটি ওয়েবপৃষ্ঠার অনুরোধ করুন এবং ফলাফলগুলি প্রক্রিয়া করুন)

আমি jQuery এজেএক্স কীভাবে করব তার সাথে আমি পরিচিত, আমি এটি "টাইমার" এ কার্যকর করার "সঠিক" উপায়টি খুঁজে পাচ্ছি না।

Answer 1

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

Comments

কিছু লোক ব্যবহার করেছেন setTimeoutএবং কিছু ব্যবহার করেছেন setInterval। কেন একজনকে অন্যের চেয়ে পছন্দ করা হবে?

— মাইকে

সেটিনটারওয়াল প্রতি 5 সেকেন্ডে একটি অজ্যাক্স কল করবে তা যাই হোক না কেন। উপায়টি এটি লিখেছেন (যা আমি বিশ্বাস করি যে এটি একটি ভাল অনুশীলন) ফলাফলগুলির জন্য অপেক্ষা করবে তারপরে 5 সেকেন্ড পরে আরও একটি এজ্যাক্স অনুরোধ জানাবে। অনেক সময় আমি সেটিনটারওয়াল ব্যবহার করব, তবে এটি তাদের মধ্যে একটি নয়। শেষ অনুরোধ থেকে ফলাফল না পাওয়া পর্যন্ত আমাদের কোনও নতুন অনুরোধ করা উচিত নয়

— জনি ক্রেইগ

যদিও কোনও একক অনুরোধ ব্যর্থ হলে প্রস্তাবিত কোডটি পোলিং বন্ধ করবে যদিও সতর্ক হন। একটি সাধারণ দৃশ্যে আপনি সম্ভবত যেভাবেই পোলিং চালিয়ে যেতে চান। আমি হতো না setTimeoutমধ্যে সাফল্য হ্যান্ডলার কিন্তু এর পরিবর্তে সঙ্গে Ajax কল চেইন সবসময় jQuery এর । এটি পছন্দ করুন: $.post('ajax/test.html') .done(function(data) { /* process */ }) .always(function() { setTimeout(doPoll, 5000); });

— মর্টেন উইকস্ট্রিম

কোনও লেজ কল অপ্টিমাইজেশন নেই। এটি কেবল ফাংশন কল স্ট্যাককে বাড়িয়ে রাখবে। ট্রামপোলিন প্যাটার্ন ব্যবহারের পরামর্শ দেওয়া হয়।

— বুপাঠি রাজা

@ বুপাঠিরাজজা দয়া করে এই জাতীয় ট্রাম্পোলিন প্যাটার্নের উদাহরণ দিন।

— সাঁতা

Answer 2

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

এটি এজাক্স অনুরোধটি সম্পূর্ণ হওয়ার পরেই পরবর্তী অনুরোধটি করবে।

উপরের উপর একটি প্রকরণ যা প্রত্যাশা / সময়সীমা ব্যবধানকে সম্মান জানানোর আগে প্রথমে যখন ডাকা হবে তখনই তাৎক্ষণিকভাবে কার্যকর করা হবে।

(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

পোলিং বাতিল করার কোনও উপায় আছে, বা এটি থামার জন্য সংকেত রয়েছে?

— তাল

সার্ভার থেকে প্রত্যাশিত ফলাফল প্রাপ্ত হলে আমি কীভাবে সময়সীমা সাফ করব?

— অভিষেক 77in

আপনি এই উদাহরণগুলির মতো টাইমআউট সাফ করতে পারেন: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); } })();

— মারিয়াস

উপরের tecoctave.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);

• পুনরাবৃত্তি ব্যবহার করে না (ফাংশন স্ট্যাক প্রভাবিত হয় না)।
• সেটটাইমআউট-রিকার্সনের টেল-কলকে অনুকূলিতকরণের দরকার হয় না suffer

Comments

একটি ES6 সমাধান দেখে ভাল লাগছে!

— প্রথম

সেটাকে কীভাবে এটি ES6 সমাধান করে বুপাঠি রাজা, সেটইন্টারওয়াল ()?

— হালিল

Answer 4

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

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

Comments

দ্রষ্টব্য: আপনি এই বাক্য setInterval(poll, 5000);

— গঠনটি

Answer 5

function make_call()
{
  // do the request

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

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

Answer 6

jQuery.Deferred () অ্যাসিঙ্ক্রোনাস সিকোয়েন্সিং এবং ত্রুটি পরিচালনার পরিচালনা সহজ করতে পারে can

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

— ব্রেন্ট ব্র্যাডবার্ন

অ্যাসিঙ্ক পুনরাবৃত্তি হয় 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()
})