任務窗格中的 Office 插件切換 div（加載面板）不起作用

Question

這是我遇到的另一個問題。 我的插件工作正常，我只有三個 API 調用，它們都工作。 但是，其中兩個調用需要一些時間才能返回數據。 為了通知用戶進程仍在運行，我想要一個加載面板。 在我的taskspane.html我有一個名為：

<div id="loader" class="hideLoader"></div>

div 使用 CSS 設置樣式。 我在默認情況下隱藏 de DIV 的 div 中添加了一個 class 。 我還有一個 class (showLoader)，它具有顯示 DIV 的樣式。

.showLoader {
  visibility: visible;
  display: block;
}

.hideLoader {
  visibility: hidden;
  display: none;
}

現在，當我執行檢索數據的 function 時，我有一個切換類的 function。

function toggleLoader(display: string) {
  if (display == 'show') {
    $("#loader").removeClass("hideLoader");
    $("#loader").addClass("showLoader");
  }
  else {
    $("#loader").addClass("hideLoader");
    $("#loader").removeClass("showLoader");
  }    
}

當我調試正在運行的插件時，我可以看到 DIV 的值設置正確，但是 DIV 沒有顯示。

調用 toggelLoader 函數的兩個函數之一：

 export async  function getMapImage() {
    return Word.run(async context => {

    toggleLoader('show');
  
    title = $("#title").val() as string;
    scale = $("#map-scale").val() as number;
    language = $("#language").val() as string;

    $("#error").text("");
    let fetchUrl: string;

    fetchUrl = mapUrl.replace("[title]",title)
    .replace("[scale]",scale.toString())
    .replace("[lng]",language)

    projectObject.Description = $("#project-description").val() as string;
    projectObject.Client.Name = $("#project-client").val() as string;

    // eslint-disable-next-line no-undef
    fetch(fetchUrl,
        { 
          method: 'POST',      
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          },     
          credentials: 'include',
          body: JSON.stringify(projectObject)                      
        })
        .then(response => response.text())
        .then(data => insertMapImage(data))
        .catch((error) => {
          // eslint-disable-next-line no-undef
          console.error('Error:', error);
          $('#error').text("Error retreiving the map!");
        });
    
        await context.sync();

        toggleLoader('hide');
      });
    }

我不知道代碼有什么問題。 沒有 javascript 異常。

插件使用 TypeScript 編碼並使用Yeoman生成

更新（在 Rick 發表評論之后）

奇怪的是，我的taskpane.ts中有另一個 function，它做了類似的事情，我的意思是操作元素的類（addClass 和 removeClass）。 這工作正常。 當此 function 從（也）按鈕單擊執行時，將添加buttonclick disabled並將元素顯示為disabled 。

 export async function clearProjectInformation(){
  return Word.run(async context =>{

    $("#insertMap").addClass("disabled");
    $("#insertTable").addClass("disabled");

    $("#project-nr").val("");
    $("#project-id").text("");
    $("#project-description").val("");
    $("#project-location").text("");
    $("#project-client").val("");
    $("#error").text("");

    await context.sync();
  }).catch(function (error) 
  {
    // eslint-disable-next-line no-undef
    if (error instanceof OfficeExtension.Error) {
      // eslint-disable-next-line no-undef
      console.log('Error code and message: ' + error.toString());
    }
  });
}

Answer 1

我終於找到了解決方案。 代碼的行為是正確的。 但是由於function getMapImage()的異步特性，最后的代碼在 fetch wat 啟動后立即執行。 這種情況發生得如此之快，以至於無法查看切換加載器層是否有效。 它確實根據我的調試器信息工作，但在屏幕上似乎沒有發生任何事情。

解決方案是將toggleLoader("hide") function 從末尾移到 promise 代碼。 我的錯誤是沒有想到異步代碼執行方式（我想到了傳統的過程方式代碼執行）。 注意與問題中發布的原始 function 相比額外的 .then .then() ：

 export async  function getMapImage() {
    return Word.run(async context => {

      
    toggleLoader("show");

    title = $("#title").val() as string;
    scale = $("#map-scale").val() as number;
    language = $("#language").val() as string;

    $("#error").text("");
    let fetchUrl: string;

    fetchUrl = mapUrl.replace("[title]",title)
    .replace("[scale]",scale.toString())
    .replace("[lng]",language)

    projectObject.Description = $("#project-description").val() as string;
    projectObject.Client.Name = $("#project-client").val() as string;

    // eslint-disable-next-line no-undef
    fetch(fetchUrl,
        { 
          method: 'POST',      
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          },     
          credentials: 'include',
          body: JSON.stringify(projectObject)                      
        })
        .then(response => response.text())
        .then(data => insertMapImage(data))
        .then((result) => {
          toggleLoader("hide");
        })
        .catch((error) => {
          // eslint-disable-next-line no-undef
          console.error('Error:', error);
          $('#error').text("Fout bij het ophalen van de kaart!");
          toggleLoader("hide");
        });
    
        await context.sync();   
      });
    }  

這個問題可以關閉！