We Keep Coding

How can I override a JavaScript variable when page is visible again?

When visiting a web page I want to declare a start time and send an AJAX request when the user leaves the site. It works like expected but when changing the tab or minimizing the browser the start time remains the same as when the user accessed the web page. I thought I could override the start time by declaring it within a function which is fired when the tab is active again but with no success.
Here is my code so far:
$(document).ready(function() {
var starts = Math.ceil(Date.now() / 1000);
//declare new start time when user returns
document.addEventListener('visibilitychange', function() {
if(!document.hidden) {
var starts = Math.ceil(Date.now() / 1000);
}
});
//AJAX
//value of old starts is used here instead of new declared starts
...
});
Does anyone have a solution for this?

Try document.visibilityState === 'visible' so your code will look like this:
$(document).ready(function() {
var starts = Math.ceil(Date.now() / 1000);
//declare new start time when user returns
document.addEventListener('visibilitychange', function() {
if(document.visibilityState === 'visible') {
var starts = Math.ceil(Date.now() / 1000);
}
});
});
Read more about it here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

const timer = document.querySelector("#timer");
window.addEventListener('DOMContentLoaded', () => {
startTimer(); // starttime on load
});
let intervalID = null;
let timerValue = 0;
const startTimer = () => {
intervalID = setInterval(() => {
timerValue++;
timer.innerText = timerValue;
}, 1000);
}
const stopTimer = () => {
clearInterval(intervalID);
}
document.addEventListener('visibilitychange', () => {
if (document.hidden) { // codition for browser tabs is active or minimize
stopTimer(); // stop timer when you leave tab minimize it on
return;
}
startTimer(); // start timer when you comback to tab maximize it
})
<div class="container">
<h2>time spend in seconds:<span id="timer">0</span>
<h2>
</div>

Javascript How to remove event that was added, and be able to add it again when need to?

I don't know to explain this, but let me try. I'm currently doing a snooker scorekeeper project, and I'll explain a problem that I have.
//Add point when player pots balls
buttons.yellowButton.addEventListener('click', () => {
coloredBall(2); // add 2 points to player
})
buttons.greenButton.addEventListener('click', () => {
coloredBall(3); // add 3 points to player
})
.
.
.
.
.
buttons.blackButton.addEventListener('click', () => {
coloredBall(7); // add 7 points to player
})
The code above works fine, It just updates the player score. Now, when all the reds are potted, I want to disable all of the buttons except the button that the players suppose to play. So I create a function that will add a new event to the buttons. The thing is that when I restart a game, I want to be able to remove those events, and to adds the same event when all the reds are potted again. How can I do this?
allRedArePotted = function() => {
buttons.yellowButton.disabled = false;
buttons.yellowButton.addEventListener('click', () => {
disableAllButtons();
buttons.greenButton.disabled = false;
yellow = 0;
})
buttons.greenButton.addEventListener('click', () => {
disableAllButtons();
buttons.brownButton.disabled = false;
green = 0;
})
buttons.brownButton.addEventListener('click', () => {
disableAllButtons();
buttons.blueButton.disabled = false;
brown = 0;
})
buttons.blueButton.addEventListener('click', () => {
disableAllButtons();
buttons.pinkButton.disabled = false;
blue = 0;
})
buttons.pinkButton.addEventListener('click', () => {
disableAllButtons();
buttons.blackButton.disabled = false;
pink = 0;
})
buttons.blackButton.addEventListener('click', () => {
black = 0;
checkWinner();
})
}

Use named functions (not anonymous) for event handlers and remove them anytime you want. For example:
// adding
document.addEventListener('click', clickHandler);
// removing
document.removeEventListener('click', clickHandler);
As mentioned in the comments, It is better to keep the state of your program somewhere and act according to that. Adding and Removing handlers is not a good approach.
someHandler(e) {
if(condition) {
// act1
}
else {
//act2
}
}

How to execute an event in a loop until the event is true

I'm stuck in Javascript at looping a piece of code when an event listener is being
placed.
For example, let's say I have a div:
<div id="option">
</div>
and I added a Javascript mouseenter event listener:
const divItem = document.getElementById("option")
divItem.addEventListner("mouseenter", () => {
console.log("Mouse is entered")
})
Now the console log happens once and after I hover the mouse, but I want it to happen every after 4 seconds
and log the same message in the console until the mouse is moving out of the div.
I tried using setTimeout:
divItem.addEventListner("mouseenter", () => {
const timeoutEvent = () => {
console.log("Mouse is entered")
setTimeout( () => { timeoutEvent() }, 4000 )
}
timeoutEvent()
})
but it is logging even after the mouse left the div,
so how can I solve this?

You're on the right track. If you want every four seconds, you want to:
Use setInterval (or set a new setTimeout every time), and
Cancel it when you see mouseleave
const divItem = document.getElementById("option")
// The timer handle so we can cancel it
let timer = 0; // A real timer handle is never 0, so we can use it as a flag
divItem.addEventListener("mouseenter", () => {
console.log("Mouse is entered");
timer = setInterval(() => {
if (timer) {
console.log("Mouse is still here");
}
}, 1000);
})
divItem.addEventListener("mouseleave", () => {
console.log("Mouse left");
clearInterval(timer);
timer = 0;
});
<div id="option">
this is the div
</div>
(I've used one second in that example instead of four so it's easier to see it working.)
Or using setTimeout rescheduling itself instead:
const divItem = document.getElementById("option")
// The timer handle so we can cancel it
let timer = 0; // A real timer handle is never 0, so we can use it as a flag
const timerInterval = 1000;
function tick() {
if (timer) {
console.log("Mouse is still here");
timer = setTimeout(tick, timerInterval);
}
}
divItem.addEventListener("mouseenter", () => {
console.log("Mouse is entered");
timer = setTimeout(tick, timerInterval);
})
divItem.addEventListener("mouseleave", () => {
console.log("Mouse left");
clearTimeout(timer);
timer = 0;
});
<div id="option">
this is the div
</div>

You should use setInterval instead of setTimeout.
You can define your 'interval' function and the interval in global scope and then use them to set and start the interval execution and clearInterval ( stop de execution ) on mouseenter/mouseleave events.
const divItem = document.getElementById("option")
let myInterval;
const timeoutEvent = () => {
console.log("Mouse is entered")
}
divItem.addEventListener("mouseenter", () => {
myInterval = setInterval(timeoutEvent, 1000);
})
divItem.addEventListener("mouseleave", () => clearInterval(myInterval))
<div id="option">
My Option
</div>

divItem.addEventListener("mouseenter", () => {
console.log("Mouse is entered");
timer = setInterval(() => {
console.log("Mouse is still here");
}
}, 4000);
})

Is it possible to prevent a Timer ends?

I'm trying to show a label when a user clicks a button. I've tried to use setTimeout to achieve this, but when you click the button multiple times before the timeout ends, this don't work properly.
This is what I got:
const [cameraLabelVisible, setCameraLabelVisible] = useState(false);
let labelTimer;
function labelVisible() {
setCameraLabelVisible(true);
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
clearTimeout(labelTimer);
}, 1500);
}
};
My question is: Is it posible reset the timer to the initial value (in this case 1500) by clicking the same button before the timer ends?
I want to show the label if the button is clicked multiple times before the time runs out.

You could clear the existing timer first:
const [cameraLabelVisible, setCameraLabelVisible] = useState(false);
let labelTimer;
function labelVisible() {
setCameraLabelVisible(true);
// clear the timer if there's another timer running
if(labelTimer) clearTimeout(labelTimer);
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
}, 1500);
}

My question is: Is it possible reset the timer to the initial value
(in this case 1500) by clicking the same button before the timer ends?
Yes, this can be achieved by clearing the existing timeout and creating a new timeout. This can be achieved as below:
const [cameraLabelVisible, setCameraLabelVisible] = useState(false);
let labelTimer;
function labelVisible() {
if(labelTimer) {
clearTimeout(labelTimer);
}
setCameraLabelVisible(true);
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
clearTimeout(labelTimer);
}, 1500);
}
};
I want to show the label if the button is clicked multiple times
before the time runs out.
This sounds like a different issue than what you asked above. If I'm understanding you correctly, the below will allow you to click the button multiple times within 1.5 seconds, and the label appear for only that amount of time before clearing.
const [cameraLabelVisible, setCameraLabelVisible] = useState(false);
let labelTimer = undefined;
function labelVisible() {
setCameraLabelVisible(true);
if(!labelTimer) {
labelTimer = setTimeout(() => {
setCameraLabelVisible(false);
labelTimer = undefined;
}, 1500);
}
};

Restart a jQuery function

In my game I have a startGame() function which initializes all the key functions that start the game. At the beginning, you press the start button to take you to the game. Once the game is complete the restart button appears. When this is clicked it takes you back to the start screen, where the start button is.
Ideally I would like at this point to be able to click the start button for the second time, and a new game appear. The problem is that it brings the old game up. I have tried to use .empty, .queue and .dequeue and reset, but nothing seems to work.
How can I restart all the functions when the restart-button is clicked?
$(document).ready(function () {
successSound = $("#successSound")[0];
failSound = $("#failSound")[0];
moveSound = $("#moveSound")[0];
hitSound = $("#hitSound")[0];
missSound = $("#missSound")[0];
hintSound = $("#hintSound")[0];
hintPic = $("#hintPic")[0];
hintPicTitle = $("#hintPicTitle")[0];
bgMusic = $('#audio-bg')[0];
newGame();
//Click event to start the game
$(".start-btn-wrapper").click(function () {
startplay();
});
//Click event to restart the game
$(".restart-btn").click(function () {
restartplay();
});
Fiddle with script in: http://jsfiddle.net/rVaFs/

It will be much easier if you stop using globals: everything not prefixed with var (including functions).
If your startplay depends on initial DOM state, and it’s too difficult (or just takes too much time) to rewrite the code, you can just make a copy of that part of DOM before starting game and delete it on finish.

You could use the document.ready callback to reset everything back to it's original state, by naming the callback function:
$(document).ready(function reset()
{
//your code here
//note, you must ensure event handlers are unbound:
$('#reset').unbind('click').bind('click',reset);//<-- call main callback
});
Another thing you have to keep in mind is that you're creating a lot of implied globals, which could cause problems if you were to use the ready callback. To address this, do change these lines: successSound = $("#successSound")[0]; to var successSound = $("#successSound")[0];.

I created a function called resetGame() and cleared the DOM:
function resetGame() {
$(document).ready();
$('.table-container').empty();
$('.reveal-wrapper').empty();
$('.helper').removeClass('inactive');
$('.tiles-wrapper').removeClass('active');
$('.hint-container').removeClass('active');
$('td').addClass('highlight-problem');
$('.game').removeClass("active").removeClass('game-over').addClass('standby').addClass('transition');
$('.score').html("");
$(".next-question").removeClass('move-down');
$('.reveal-wrapper').removeClass('image' + randomNumber);
$(bgMusic).unbind();
score.right = 0;
score.wrong = 0;
}
function newGame() {
randomWord = [];
listOfWords = [];
attemptNumber = [];
completionNumber = [];
populationNumber = [];
gridSize = [];
createGrid();
backGroundImage();
dragEvent();
nextQuestion();
closeMessage();
replaySound();
$('.score').html("0/" + completionNumber);
$('.game').removeClass("standby").addClass('active').addClass('transition');
$(bgMusic).on('timeupdate', function () {
var vol = 1,
interval = 250;
if (bgMusic.volume == 1) {
var intervalID = setInterval(function () {
if (vol > 0) {
vol -= 0.05;
bgMusic.volume = vol.toFixed(2);
} else {
clearInterval(intervalID);
}
}, interval);
}
});
}
$(document).ready(function () {
successSound = $("#successSound")[0];
failSound = $("#failSound")[0];
moveSound = $("#moveSound")[0];
hitSound = $("#hitSound")[0];
missSound = $("#missSound")[0];
hintSound = $("#hintSound")[0];
hintPic = $("#hintPic")[0];
hintPicTitle = $("#hintPicTitle")[0];
bgMusic = $('#audio-bg')[0];
backGroundSound();
playBackGroundSound();
keyPress();
$(".start-btn-wrapper").click(function () {
newGame();
});
$(".restart-btn").click(function () {
resetGame();
});
});
I then called it in the restart-btn click event.