使用jQuery加載外部javascript並禁止「在主線程上使用同步XMLHttpRequest已被棄用...」

我一直在閱讀關於此主題的多篇文章，但一直未能找到解決方案。我使用jQuery來設置一個簡單的插件，這個插件也依賴於其他一些文件（例如一個語言文件）。我想爲最終用戶提供儘可能簡單的設置，所以我想動態加載這些JavaScript文件。當我這樣做時，我要麼跑到警告Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.，要麼我必須推遲我的腳本，因爲在需要包含文件內容的位置，異步調用還沒有完成。使用jQuery加載外部javascript並禁止「在主線程上使用同步XMLHttpRequest已被棄用...」

我試過多種方法來實現這一目標而不會延遲腳本：

嘗試1。通過追加到身體

$('body', document).append('<script type="text/javascript" src="myfile.js"></script>');

嘗試2 - 通過使用$ .getScript

$.ajaxSetup({ async: false }); 
$.getScript('myfile.js') 
    .done(function(script, textStatus) { 
     // success code... map variables 
    }) 
    .fail(function(jqxhr, settings, exception) { 
     if(window.console) { 
      console.log('error loading the file); 
     } 
    });

嘗試3 - 使用$ .ajax，大致與$ .getScript相同

$.ajax({ 
    url: 'myfile.js', 
    dataType: 'script', 
    async: false, 
    success: function(script, textStatus) { 
     // success code... map variables 
    } 
});

嘗試4 - 使用$ .holdReady（），但由於該插件僅在$(document).ready(function() { $('.myDemo').myplugin(); }內啓動，因此這看起來無效。

$.holdReady(true); 
$.getScript('myfile.js', function() { 
    // success code.. map variables 
    $.holdReady(false); 
});

如何連接/包含外部文件，而不必延遲腳本並且不確保警告沒有被觸發。這甚至可能，或者我要求水同時冷凍和融化？

來源

2015-10-17 Ben

'文件撰寫（ '<腳本類型= 「文本/ JavaScript的」 SRC = 「myfile.js」><\/script>'）'是同步，所以可以（在裝載期間）動態地添加和其他之前到達有需要的文件。那就是說，你的libs（require/amd）的構建過程或異步版本值得創建並加載得更快。 – dandavis

如何創建文件的異步版本？基本上外部文件包含嵌套數據的變量。例如，語言文件就像'var translations = {myKey：'這是一段文本'，mySecondKey：'其他值'}' – Ben

我現在已經修復它嵌套ajax請求和建立在complete回調。我不確定這是否是最理想的方式，但是有兩個外部文件（現在）可以維護。

有一個缺點;此時爲插件的每個實例請求兩個文件。所以某種緩存變量也應該被實現，並且基於文件是否已經被加載，它們應該或者不應該在下一次迭代中加載。

歡迎您提出其他建議！

$.ajax({ 
    url: 'firstfile.js', 
    dataType: 'script', 
    success: function() { 
     // success code.. map variables 
    }, 
    complete: function() { 
     $.ajax({ 
      url: 'secondfile.js', 
      dataType: 'script', 
      success: function() { 
       // success code.. map variables 
      }, 
      complete: function() { 
       // call function to continue the procedure 
      } 
     }) 
    } 
});

來源

2015-10-17 11:50:23 Ben

使用jQuery加載外部javascript並禁止「在主線程上使用同步XMLHttpRequest已被棄用...」

回答

相關問題