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

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

1 个答案: