How do I change the “sleep” function to work in Internet Explorer?

Question

So I have a website where you can click a button which then redirects you to a different page. The redirection should not happpen instantly but after like 3 seconds. For this I found here on Stackoverflow a code snippet which works perfectly in Chrome and Firefox, but it doesn't in Internet Explorer.

Tested it in Chrome and Firefox where it works perfectly fine. Doesn't in Internet Explorer though..

function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function redirect(user) {
        await sleep(500);
        document.getElementById("redirect" + user).innerHTML = "Redirecting.";
        await sleep(700);
        document.getElementById("redirect" + user).innerHTML = "Redirecting..";
        await sleep(700);
        document.getElementById("redirect" + user).innerHTML = "Redirecting...";
        await sleep(700);
        window.open("url", "_newtab");
        await sleep(1000);
        document.getElementById("redirect" + user).innerHTML = "";
    }

Should redirect me to a site after some time. Doens't work in Internet Explorer.

Error Message: "Syntaxerror"

Where?: => in return new Promise(resolve => setTimeout(resolve, ms));

Answer 1

Your code uses several features IE11 doesn't have:

• Promises
• Arrow functions
• async / await

Either don't use those, or transpile to ES5 and include a promise polyfill. Babel is one tool you can use for that.

In that code, "not using those" would probably be to simply nest the setTimeout callbacks:

setTimeout(function() {
    document.getElementById("redirect" + user).innerHTML = "Redirecting.";
    setTimeout(function() {
        document.getElementById("redirect" + user).innerHTML = "Redirecting..";
        setTimeout(function() {
            document.getElementById("redirect" + user).innerHTML = "Redirecting...";
            setTimeout(function() {
                window.open("url", "_newtab");
                setTimeout(function() {
                    document.getElementById("redirect" + user).innerHTML = "";
                }, 1000);
            }, 700);
        }, 700);
    }, 700);
}, 500);

Although you could do it with a loop as well.

You can see why the newer features are desirable.

Answer 2

IE11 (released in 2013) does not support async functions (specified in ES2017), or arrow functions, or Promises. Use setTimeout instead:

function makeTimeout(time, user, msg) {
  setTimeout(time, function() {
    document.getElementById("redirect" + user).innerHTML = msg;
  }, time);
}
function redirect(user) {
  makeTimeout(500, user, "Redirecting.");
  makeTimeout(500 + 700, user, "Redirecting..");
  makeTimeout(500 + 700 + 700, user, "Redirecting...");
  setTimeout(function() {
    window.open("url", "_newtab");
  }, 500 + 700 + 700 + 700);
  makeTimeout(500 + 700 + 700 + 700 + 1000, user, '');
}

Answer 3

You can use setTimeout directly without a Promise to do this.

 function redirect(user) { setTimeout(function() { document.getElementById("redirect" + user).innerHTML = "Redirecting."; }, 500); setTimeout(function() { document.getElementById("redirect" + user).innerHTML = "Redirecting.."; }, 1200); setTimeout(function() { document.getElementById("redirect" + user).innerHTML = "Redirecting..."; }, 1900); setTimeout(function() { window.open("url", "_newtab"); }, 2600); }