时间戳

首页 > 解决方案 > Javascript İf Promise 加载 Onclick 然后 İf 再次 Onclick 不再加载？

javascript - Javascript İf Promise 加载 Onclick 然后 İf 再次 Onclick 不再加载？

问题描述

var sarki = document.getElementsByClassName("sarki")[0];
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

sarki.onclick = function () {
  document.getElementsByClassName("siyah")[0].innerHTML = "<div class='loader'></div>";
Promise.all([
  fetch('blabla.txt').then(x => x.text())
]).then(([sarki]) => {
  document.getElementsByClassName("siyah")[0].innerHTML = sarki;
}),modal.style.display = "block",document.title="blabla";
}

span.onclick = function() {
  modal.style.display = "none",document.title="blabla";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none",document.title="blabla";
  }
}

如您所见，单击按钮是否会获得 txt 文件，但再次如您所见，我打开模式，您可以关闭该模式，但如果您再次单击该按钮（不刷新页面），则该 txt 文件将再次加载...想检查是否加载了 txt 文件然后不再加载，因为我制作了歌曲列表，但如果再次加载，播放歌曲正在停止......

如果加载的文件不再使用 javascript（没有库）加载它，我该怎么办？

标签： javascriptpromise

解决方案

您需要跟踪文本文件是否已加载。您也不需要Promise().all()，因为您正在处理单个因素（文件），而不是多个因素。

let file; //<-- file loaded tracker
sarki.onclick = function () {
    let prom = new Promise(res => {
        !file ?
            fetch('blabla.txt').then(x => res(file = x.text())) :
            res(file);
    });
    prom.then(file => {
        document.getElementsByClassName("siyah")[0].innerHTML = file;
    });
}

推荐阅读