在完成第3個庫中的上一個函數之后，運行javascript中的下一行（不是jquery）

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...'); 
});