[javascript] كيف يمكنني الحصول على jQuery لأداء متزامن ، بدلا من الطلب غير المتزامن ، أجاكس؟



5 Answers

يمكنك وضع إعداد Ajax jQuery في الوضع المتزامن عن طريق الاتصال

jQuery.ajaxSetup({async:false});

ثم قم بإجراء مكالمات Ajax باستخدام jQuery.get( ... );

ثم أعد تشغيلها مرة أخرى

jQuery.ajaxSetup({async:true});

أعتقد أنه يعمل نفس الشيء كما هو مقترح بواسطةAdam ، ولكن قد يكون من المفيد لشخص يرغب في إعادة تكوين jQuery.get() أو jQuery.post() إلى صياغة jQuery.ajax() الأكثر تفصيلاً.

Question

لدي أداة جافا سكريبت التي توفر نقاط تمديد قياسية. واحد منهم هو وظيفة beforecreate . يجب أن يقوم بإرجاع false لمنع إنشاء عنصر.

لقد قمت بإضافة مكالمة Ajax إلى هذه الوظيفة باستخدام jQuery:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

لكنني أريد أن أحول عقلي من إنشاء العنصر ، لذا يجب أن أعود false في وظيفة الأم ، وليس في معاودة الاتصال. هل هناك طريقة لتنفيذ طلب Ajax متزامن باستخدام jQuery أو أي واجهة برمجة تطبيقات أخرى؟




ضع في اعتبارك أنه في حالة قيامك بإجراء مكالمة عبر Ajax (عبر استخدام JSONP ) - لا يمكنك القيام بذلك بشكل متزامن ، سيتم تجاهل علامة async من خلال jQuery.

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

بالنسبة إلى مكالمات JSONP ، يمكنك استخدام:

  1. اياكس-الدعوة إلى المجال الخاص بك - والقيام من جانب الخادم استدعاء عبر النطاقات
  2. تغيير التعليمات البرمجية للعمل بشكل غير متزامن
  3. استخدام مكتبة "وظيفة التسلسل" مثل Frame.js (هذا answer )
  4. حظر واجهة المستخدم بدلاً من حظر التنفيذ (هذه answer ) (الطريقة المفضلة)



باستخدام برنامج async: false يمكنك الحصول على متصفح محظور. بالنسبة للحل المتزامن غير المحظور ، يمكنك استخدام ما يلي:

ES6 / ECMAScript2015

باستخدام ES6 ، يمكنك استخدام مولد ومكتبة مشتركة :

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

مع ES7 يمكنك فقط استخدام asyc في انتظار:

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}



هذا هو المثال:

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});



تفوت كل هذه الإجابات النقطة التي يؤدي بها إجراء مكالمة أجاكس باستخدام async: false إلى تعليق المتصفح حتى يكتمل طلب Ajax. سيؤدي استخدام مكتبة التحكم في التدفق إلى حل هذه المشكلة بدون تعليق المتصفح. هذا مثال على ذلك مع Frame.js :

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}



هذا هو تنفيذ بسيط لطلبات ASYNC مع jQuery. آمل أن يساعد هذا أي شخص.

var queueUrlsForRemove = [
    'http://dev-myurl.com/image/1', 
    'http://dev-myurl.com/image/2',
    'http://dev-myurl.com/image/3',
];

var queueImagesDelete = function(){

    deleteImage( queueUrlsForRemove.splice(0,1), function(){
        if (queueUrlsForRemove.length > 0) {
            queueImagesDelete();
        }
    });

}

var deleteImage = function(url, callback) {
    $.ajax({
        url: url,
        method: 'DELETE'
    }).done(function(response){
        typeof(callback) == 'function' ? callback(response) : null;
    });
}

queueImagesDelete();





Related