JSFiddle - React, Tailwind, and code Playground

by epoch

HTML

<input id='but' type='button' value='FILTER'/>

JavaScript

$('but').observe('click', function() {
    filter(function() { 
        console.log('i am a user filter'); 
    }); 
});

function filter(callback, extra) {
    window.filterLastUpdated = new Date().getTime();
    console.log('running filter method');
    callback && callback();
}

var value_from_server = 10;
(function refresh(interval) {
    var now, timeoutID;
    timeoutID = window.setTimeout(function() {
        window.clearTimeout(timeoutID);

        // ensure here somehow that the results are interval old!
        // use case :
        // page loads, timer starts, assuming interval is 5 seconds,
        // user waits 4 and a half seconds and clicks on filter himself
        // then in another half second it will be done again, this is not correct!

        if (!!window.filterLastUpdated) {
            now = new Date().getTime();
            if ((now - window.filterLastUpdated) >= (interval * 1000)) {
                filter(function() {
                    console.log(new Date().toString());
                    refresh(interval);
                }, '&newPage=false');
            } else {
              refresh(interval);
            }
        } else {
            refresh(interval);
        }
    }, interval * 1000);
})(value_from_server);

console.log('running first page filter');
filter();