JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<button id="send">send</button>

JavaScript

// Test 2 - flushing collected events at end of function scope?

localStorage.clear();

function log(message) {
    p = document.createElement("p");
    p.innerHTML = message;
    document.body.appendChild(p);
}

window.addEventListener('storage', function(e) {
    var oldKey = '',
        time = e.newValue,
        p;
    
    if (e.newValue.indexOf("|") > -1) {
        time = time.split('|');
        oldKey = " for " + time[0];
        time = time[1];
    }

    log(e.key + oldKey + ' sent ' + time + ' received ' + +(new Date()));
    
    if (e.key.substring(0, 2) === 'rs') {
        return;
    }

    // respond
    var key = +(new Date());
    (function(){
        localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
        localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
    })();
    
    for (var i=0; i < 10000000; i++) {
        // wasting some time
        "hello ".substring(3);
    }
    
    (function(){
        localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
        localStorage.setItem('rs' + key++, e.key + '|' + +(new Date()));
    })();
});

var sender = document.getElementById('send');
sender.onclick = function(e) {
    var key = +(new Date()), k, t;
    
    (function(){
        localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
        log("sent " + k + " at " + t);
        localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
        log("sent " + k + " at " + t);
    })();
    
    for (var i=0; i < 10000000; i++) {
        // wasting some time
        "hello ".substring(3);
    }
    
    (function(){
        localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
        log("sent " + k + " at " + t);
        localStorage.setItem( k = 'rq' + key++, t = +(new Date()));
        log("sent " + k + " at " + t);
    })();
};