Can a loading sweet alert wait for a loop to finish before closing?-CodePudding

I want to display a loading sweet alert while a loop is running. How can I make that possible. What currently happens is the sweet alert only opens for a split second after the loop has finished. I have tried making testFunc async and awaiting the wait function, but that didn't help. Not sure what to do at this point. I appreciate any help. Thank you so much

function wait(ms) {
  var start = new Date().getTime();
  var end = start;
  while (end < start   ms) {
    end = new Date().getTime();
  }
}
function testFunc() {
  sweetAlert({
    title: "Please wait",
    showCancelButton: false,
    showConfirmButton: false,
  });

  wait(3000);
  console.log("done");
  sweetAlert.close();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.js"></script>
<button id="testBtn" onclick="testFunc()">TEST</button>

Link to fiddle: https://jsfiddle.net/n4w8pf7L/22/

CodePudding user response：

Your wait function is blocking the main thread, that's not really wait for anything. You need to handle this asynchronously with Promises and async await.

function wait(ms = 0) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function testFunc() {
  sweetAlert({
    title: "Please wait",
    showCancelButton: false,
    showConfirmButton: false
  })

  await wait(3000);

  console.log("done");
  sweetAlert.close();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.js"></script>
<button id="testBtn" onclick="testFunc()">TEST</button>

CodePudding user response：

Using event handling instead of blocking while the alert is shown (blatant derivative of Xion 14's answer :P). This is provide a workaround to a condition where an alert window cannot be dismissed due to an unexpected error. While this obviously not an issue with a simple timeout, the OPs intent seems to be that work will be getting done while this alert is displayed.

const waitComplete = new Event('waitComplete')

function wait(ms = 0) {
  return new Promise(resolve => setTimeout(() => document.dispatchEvent(waitComplete), ms))
}

async function testFunc() {
  sweetAlert({
    title: "Please wait",
    showCancelButton: false,
    showConfirmButton: false
  })

  wait(3000);
}

document.addEventListener('waitComplete', () => {
  console.log("done");
  sweetAlert.close();
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.js"></script>
<button id="testBtn" onclick="testFunc()">TEST</button>