JSFiddle - React, Tailwind, and code Playground

by ijse

HTML

<button id="start"> Start </button>
<ul>
    <li><a href="#"> link1 </a></li>
    <li><a href="#" id="mylink2"> link2 </a></li>
    <li><a href="#"> link3 </a></li>
    <li><a href="#"> link4 </a></li>
</ul>

<div id="result"></div>
<div id="mask"></div>

CSS

#mask { 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0;
    left:0;
    cursor: pointer;
}

JavaScript

// All links
var as = document.getElementsByTagName("a");
// Start button
var startBtn = document.getElementById("start");
// The mask
var mask = document.getElementById("mask");
// Timeout handlers
var ths = [];

// Add click behaviour
for(var i=0; i<as.length; i++) {
    var a = as[i];
    (function() {
        var t = a.innerText;
        a.addEventListener("click", function() {
           document.getElementById("result").innerHTML += t + " clicked!<br/> ";
        });
    })();
    
}

// Set start button
startBtn.addEventListener("click", function() {
    // Show mask
    mask.style.display = "block";

    // Simulate click event
    for(var i=0; i<as.length; i++) {
        // Create event object
        var clickEvent = document.createEvent("MouseEvent");
        clickEvent.initEvent("click", true, false);
        // 1s, 3s, 5s ...
        (function() {
            console.log("setTimeout:");
            var t = setTimeout(function() {
                console.log("...", as[i]);
                as[i].dispatchEvent(clickEvent);
            }, i*2+1);
            ths.push(t);
        });
    } //for
},false);

// When click the mask...
mask.addEventListener("click", function(e) {
    e.target.style.display = "none";
    for(var i=0; i<ths.length; i++) {
        window.clearTimeout(ths[i]);
    }
});