لا يتم تحديث css على الكروم عند أياكس

0

أحتاج إلى إظهار تقدم شريط مع العديد من طلبات أجاكس. لا يجب أن تكون غير متزامنة لأن كل طلب يعتمد على الطلب السابق. كل شيء يعمل بشكل جيد ، باستثناء شريط التقدم. الذي لا يعمل بالنسبة لي في Chrome. في Firefox يعمل بشكل مثالي. عند إجراء العديد من الاختبارات ، أدركت أن الكروم لا يحدِّث بالتأكيد أي خاصية من خصائص html عند وجود عدة طلبات بدون مزامنة.

لدي رمز الاختبار هذا:

$('#run').click(function(){
  color_text();
});

function color_text(){

    console.log("Coloring...");

    sleep();
    console.log('Load 1');
    $('#text').html('Test 1');

    sleep();
    console.log('Load 2');
    $('#text').html('Test 2');

    sleep();
    console.log('Load 3');
    $('#text').html('Test 3');

}



function sleep() {
  $.ajax({
      url: '/echo/html/',
      async: false,
      data: {
          html: "<p>Text echoed back to request</p>",
          delay: 3
      },
      method: 'post',
      update: 'target'
  }).done( function( data ){
        result = data;
         $('#text').html('Test Loaded');
    })
}
<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
  <body>
   <button id="run">
     <h2>Run</h2>
   </button>
   <hr>
   
<div id="text"> Test</div>

</body>
</html>

في هذا الرابط ستلاحظ أكثر من عدم تحديث https://jsfiddle.net/arturoverbel/bgm4pa10/10/

1 إجابة

1
افضل جواب

الطلبات المتزامنة سيئة. تحظر سلسلة جافا سكريبت الرئيسية وتجميد تطبيقك ويتم إيقافها :

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

يجب أن تلاحظ ذلك في تطبيقك. لاحظ كيف تجمد الصفحة بأكملها عندما تضغط على "تشغيل" في ملف JSFiddle أيضًا.

ومع ذلك ، لا يزال بإمكانك تحقيق ما تريده بشكل غير متزامن مع الوعود.

السمة الرئيسية للوعود هي أنه يمكنك إرجاع وعد آخر وسيستمر في السلسلة. أضف القليل من العودية وستحصل على حل لطيف لا يجمد صفحتك بالكامل.

باستخدام المثال الخاص بك:

$('#run').click(function() {
    color_text();
});

function color_text() {

    console.log("Coloring...");

    run();

}

function run(count = 0) {

    // make a request. consider using `fetch()` 
    return makeRequest().then(result => {

        // if we're not done, 
        // return `run()` again which runs this
        // whole promise again
        if (result != 'done!') {
            // optionally update your html
            $('#text').html(count);
            return run(count + 1);
        }

        $('#text').html(result);
    });

}

https://jsfiddle.net/je2m0pxa/

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام