Javascript 加载繁重的js小部件导致浏览器停止响应

我在我的页面中使用了一个外部js重部件，这会导致浏览器停止响应。 我想通过使用

setTimeout

在它们之间创建一个延迟，以给加载时间。但仍同时加载。我正在寻找一种方法来逐个插入和加载小部件

function setWidgets(){
  var div = document.getElementById("content");
  var subDiv = div.getElementsByTagName('div');
  var id;
  var arr = [];

  for(var i = 0; i < subDiv.length; i++) {
    var elem = subDiv[i];
    if(elem.className == "info" ) {
      setTimeout( setWidget(elem) , 600);
    }
  }
}

function setWidget(elem) { 
  var para = elem.innerHTML.split(",");
  var divId = para[2];
  var widget = getWidget(para);
  var elemnt = document.getElementById(divId);

  $(elemnt).html(widget);
}

function getWidget(para){

  var pair = para[0];
  var frame = para[1];
  var elemId = para[2];
  var widget = [];

  widget.push(
    '<script>',
    '\n',
    "new TradingView.widget({",
    '\n',
    '"width": 512,',
    '\n',
    '"height": 288,',
    '\n',
    '"symbol": "FX:',
    pair,
    '",',
    '\n',
    '"interval":',
    '"',
    frame,
    '",',
    '\n',
    '"container_id": ',
    '"',
    elemId,
    '",',
    '\n',
    '"timezone": "exchange",',
    '\n',
    '"theme": "White",',
    '\n',
    '"style": "1",',
    '\n',
    '"toolbar_bg": "#f1f3f6",',
    '\n',
    '"hide_top_toolbar": true,',
    '\n',
    '"save_image": false,',
    '\n',
    '"hideideas": true',
    '\n',
    '});',
    '\n',
    '</',
    'script>'
  );

  return widget.join("");
}

函数setWidgets（）{
var div=document.getElementById（“内容”）；
var subDiv=div.getElementsByTagName（'div'）；
变量id；
var-arr=[]；
对于（变量i=0；i

问题在于：

setTimeout( setWidget(elem) , 600);

使用elem调用

setWidget

，并将结果传递给

setTimeout

。您需要将函数传递给

setTimeout

，它将在延迟后调用：

setTimeout(function (elem) {
    setWidget(elem) 
}.bind(null, elem), 600);

但在这种情况下，您将立即启动所有

setTimeout

，您需要使延迟不同：

setTimeout(function (elem) {
    setWidget(elem) 
}.bind(null, elem), 600 * (i + 1));

注意：您还需要使用当前

元素创建一个作用域。我正在为它使用
函数.prototype.bind
。如果您需要对IE6-8的支持，可以使用
$.proxy
或创建IIFE包装器：

  //create IIFE (Immediately Invoked Function Expression) wrapper
  //IIFE will create a new scope with needed variable elem
  setTimeout((function (elem) {
    return function () {
       setWidget(elem)
    }
  }(elem)), 600 * (i + 1));

什么是
TradingView
？股票图表和投资者社区。他们有绘图API和小部件。仍然！首先有一个延迟，然后所有小部件同时显示。谢谢你能用你编辑的代码创建一个例子吗？因为我的示例很好用，所以我用第二个示例替换了setTimeout（）部分。我两个都试过了。我编辑了我的答案，我们只是忘了在循环中更改延迟，没有更改延迟所有
setTimeout
都会一起调用。太好了：）谢谢你救了我。我必须研究它。我不清楚！