Question

在我们的网站中，有一个呼叫跟踪脚本，该脚本在用户在联系页面中选择其国家/地区后直接运行。

过程如下：
1.客户点击进入列表，然后选择他们所在的国家/地区，在这一阶段，一旦他们点击进入元素，我们便开始进行跟踪

2。运行第3部分的脚本，通过用新的新电话替换上一课来更改网站中的电话号码

3。然后，我们要在下一行获取新号码。

计划的脚本如下：

   orgCallNo = document.querySelector(".oldTel").innerHTML;
    var x = setInterval(function (){ 
      telephone.change();
      var newCallNo = document.querySelector(".tel").innerHTML;
      if (newCallNo !== orgCallNo) {
        console.log(newCallNo);
        clearInterval(x);
        }
      }, 20);

问题是，当我调用外部脚本（即电话更改脚本）时，需要一段时间，下一行将使用旧输入并继续该过程，然后再完成电话脚本。

要解决此问题，我已经尝试过setTimeOut函数，以便在下一步中暂停：

orgCallNo = document.querySelector(".oldTel").innerHTML;
var x = setInterval(function (){ 
  telephone.change();
  var newCallNo = setTimeout(function(){return 
                  document.querySelector(".tel").innerHTML;}, 300);
  if (newCallNo !== orgCallNo) {
    console.log(newCallNo);
    clearInterval(x);
    }
  }, 20);

但是它返回未定义。同时，我想尝试使用回调函数，但首先，大多数解决方案都在jQuery中，这一次我不能使用。第二点是，该脚本使用了来自第三方的库，并且没有直接返回脚本中的某些输入，因此我不确定何时设置回调函数。

在这种情况下，如何确保第三方的脚本完成后下一行运行？谢谢你们的帮助=）

Answer 1

您可以使用readyState来加载此外部库，像这样您可以检测到何时加载了第三个库（比setTimeout更好）

示例代码

function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {  //IE
    script.onreadystatechange = function() {
      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName( "head" )[0].appendChild( script );
}


// call the function...
loadScript(pathtoscript, function() {
  console.log('script ready! i can now execute my code...'); 
});

完成第3个库中的前一个功能（不是jquery）后，在javascript中运行下一行

1 个答案: