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

Question

我在我的页面中使用了外部 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("");
}

Answer 1

问题出在这里:

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

注意:您还需要使用当前elem创建一个范围。我正在使用 Function.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));