Is it possible to nest a jQuery event listener inside an if-statement?

Question

I am trying to set up a timeout for users that have logged in on my page. I have a working timeout function that I copied from elsewhere, but there's a slight issue I'm worried about. The page in question is a single page that reloads its content by jQuery/PHP instead of navigating the user to a different URL.

The event listener checks for any user activity, and resets the timeout when that happens. I want the timer to only run when the user is logged in, and once the timeout hits zero it logs the user out. I achieved this by switching a global variable idleEnabled between true and false when people login/logout/timeout.

My issue: while the timeout functions are only available within the event listener if the user is logged in, the event listener itself is permanently activated and gets constantly pinged by simply moving the mouse around. I am worried that this might slurp up the client browser capacity.

What I have: I've been looking whether I can put an event listener inside if (idleEnabled == true) { listener here } but from what I've found this is not possible. Even if it were, I'm pretty sure a flat if-statement is only run when the script is loaded, but the variable in question will change while the page itself is not reloaded.

Main question: Is there any way to do this? Or is this fine and am I worrying over something irrelevant?

Side question: I read that it's not preferable to use javascript global variables, but I didn't know any other way to do this. Is it okay to use them like this?

Relevant jQuery code:

//create a global timeout handle
var idleTimer = null;
var idleEnabled = false;
var idleWait = 10000; //This is low for testing purposes

//to prevent the timer from disappearing if people refresh the page,
//check if the logout button is on the page when loading the script:
if ($("#logout").length) {window.idleState = true;} 

$('*').on('mousemove keydown scroll', function () { //listen for activity

    if (idleEnabled == true) { //if the timer is enabled...

        clearTimeout(window.idleTimer); //...clear it,

        window.idleTimer = setTimeout(function () { //and reset it, so that...

            $(document).trigger("timeOut"); //...the custom timeout event fires
            window.idleEnabled = false; //...and the timer is disabled

        }, idleWait);

    } 
});

$(".column").on("click", "#login, #logout", {cause: "user"}, validateUser) //Call a validation on login/logout
$(document).on("timeOut", {cause: "timeout"}, validateUser) //Call a validation on timeout

//The function validateUser will set idleEnabled = true on login and idleEnabled = false on logout.

Answer 1

You should definitely be able to add the listener inside an if branch. On login, you'll need to set it again. Here's how I would do it:

var idleTimer = null;
var idleWait = 10000;

// There is probably a better way to check if the user is logged in
function isLoggedIn() {
    return $("#logout").length > 0;
}

function setActivityListener(active) {
    if (active)
        $('*').on('mousemove keydown scroll', activityHandler);
    else
        $('*').off('mousemove keydown scroll');
}

function activityHandler() {
    clearTimeout(idleTimer);
    idleTimer = setTimeout(function () {    
        $(document).trigger("timeOut");
    }, idleWait);
};


if (isLoggedIn()) {
    setActivityListener(true);
}

$(".column").on("click", "#login, #logout", {cause: "user"}, validateUser);
$(document).on("timeOut", {cause: "timeout"}, validateUser);

// On login (in validateUser?)
setActivityListener(true);

// On logout
setActivityListener(false);