Home » Jquery » javascript – window.addEventListener causes browser slowdowns – Firefox only. Why?

javascript – window.addEventListener causes browser slowdowns – Firefox only. Why?

Posted by: admin February 22, 2020 Leave a comment

Questions:

Im writing about the functions requested by my client to check of user session.
The goal is to ask for the password after 5 minutes of user inactivity.
I ran into a rather strange problem in Firefox.

PREMISE: To work usually I use Chrome. In fact, when writing the functions I did not notice any problems.

Analyzing the result of the functions in Firefox I realized that something is wrong. In particular, the browser behaves strangely. Every time the EventListener event is executed, the browser redraws the page by moving the objects and in addition it seems very slow in executing the events, which doesn’t happen in Chrome. Why??? …i dont know!

Here is the code:

var IDLE_TIMEOUT = 300; //seconds
var _idleSecondsCounter = 0;
var InfoSess = document.getElementById('infosession');
var SessinStandBy = 0;

function force_reflow(){
    $(window).trigger('resize');
}

window.addEventListener('click', function(e) {
    SessinStandBy == 0 ? InfoSess.innerHTML = 'Session: <strong>active</strong> [event: click]' : InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>';
    _idleSecondsCounter = 0;
});
window.addEventListener('mousemove', function(e) {
    SessinStandBy == 0 ? InfoSess.innerHTML = 'Session: <strong>active</strong> [event: mouse moved]' : InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>';
    _idleSecondsCounter = 0;
});
window.addEventListener('keypress', function(e) {
    SessinStandBy == 0 ? InfoSess.innerHTML = 'Session: <strong>active</strong> [event: keyboard pressed]' : InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>';
    _idleSecondsCounter = 0;
});
var myInterval = window.setInterval(CheckIdleTime,1000);

function CheckIdleTime() {

    var _DiffTime = IDLE_TIMEOUT-_idleSecondsCounter;

    var _MinutDiffTime = Math.floor(_DiffTime / 60) < 10 ? '0'+Math.floor(_DiffTime / 60) : Math.floor(_DiffTime / 60);
    var _SecondsDiffTime = Math.floor(_DiffTime % 60) < 10 ? '0'+Math.floor(_DiffTime % 60) : Math.floor(_DiffTime % 60);
    var _Countdown = _MinutDiffTime+'m:'+_SecondsDiffTime+'s';

    var _MinutCounter = Math.floor(_idleSecondsCounter / 60) < 10 ? '0'+Math.floor(_idleSecondsCounter / 60) : Math.floor(_idleSecondsCounter / 60);
    var _SecondsCounter = Math.floor(_idleSecondsCounter % 60) < 10 ? '0'+Math.floor(_idleSecondsCounter % 60) : Math.floor(_idleSecondsCounter % 60);
    var _IncativeTime = _MinutCounter+'m:'+_SecondsCounter+'s';

    _idleSecondsCounter++; // add 1s
    if (_idleSecondsCounter > 30) {
        InfoSess.innerHTML = 'Sessione intattiva da <strong>'+_IncativeTime+'</strong> | in pausa tra: <strong>'+_Countdown+'</strong>';
        force_reflow();
    }

    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(myInterval);
        SessinStandBy = 1;
        InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>'; 
        force_reflow();
    }
}

I added a force reflow function, I solved the problem of moving objects on the page but not of slowness.

I hope for help from the stackoverflow community. Thank you!

UPDATE CODE

var IDLE_TIMEOUT = 300; //seconds
var _idleSecondsCounter = 0;
var InfoSess = document.getElementById('infosession');
var SessinStandBy = 0;

function force_reflow(){
    $(window).trigger('resize');
}

function display_session_message(_event_type) {
    if (prec_event_execute != _event_type) {
        prec_event_execute = _event_type;
        InfoSess.innerHTML = 'Session <strong>active</strong> - User event: ' + _event_type;
        force_reflow();
        //console.log('ui refresh');
    } else {
        //console.log('silent check');
    }
}

var update_layout = _.debounce(function (e) {
    display_session_message(e.type);
    _idleSecondsCounter = 0;
},1000);

window.addEventListener('click', update_layout, false, { passive: true });
window.addEventListener('keypress', update_layout, false, { passive: true });
window.addEventListener('mousemove', update_layout, false, { passive: true });

var myInterval = window.setInterval(CheckIdleTime,1000);

function CheckIdleTime() {
    var _DiffTime = IDLE_TIMEOUT-_idleSecondsCounter;
    var _MinutDiffTime = Math.floor(_DiffTime / 60) < 10 ? '0'+Math.floor(_DiffTime / 60) : Math.floor(_DiffTime / 60);
    var _SecondsDiffTime = Math.floor(_DiffTime % 60) < 10 ? '0'+Math.floor(_DiffTime % 60) : Math.floor(_DiffTime % 60);
    var _Countdown = _MinutDiffTime+'m:'+_SecondsDiffTime+'s';
    var _MinutCounter = Math.floor(_idleSecondsCounter / 60) < 10 ? '0'+Math.floor(_idleSecondsCounter / 60) : Math.floor(_idleSecondsCounter / 60);
    var _SecondsCounter = Math.floor(_idleSecondsCounter % 60) < 10 ? '0'+Math.floor(_idleSecondsCounter % 60) : Math.floor(_idleSecondsCounter % 60);
    var _IncativeTime = _MinutCounter+'m:'+_SecondsCounter+'s';
    _idleSecondsCounter++; // add 1s
    if (_idleSecondsCounter > 30) {
        InfoSess.innerHTML = 'Sessione intattiva da <strong>'+_IncativeTime+'</strong> | in pausa tra: <strong>'+_Countdown+'</strong>';
        force_reflow();
    }
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(myInterval);
        SessinStandBy = 1;
        InfoSess.innerHTML = 'Session: <strong>stand-by, please insert password!</strong>'; 
        force_reflow();
    }
}
How to&Answer: