Countdown timer not working in vue js pop up - javascript

I am trying to redirect to another website after countdown. The redirect works, however the countdown decrease only one time.
For example:
I have set the counter to 5. But when the pop up opens, its shows 4 and doesn't decrease further.
<p>Redirecting in {{ counter }}</p>
<script>
export default {
name: "modal",
data() {
return {
toggleModal: false,
counter: 5
}
},
methods: {
showModal() {
this.toggleModal = true;
this.countDown();
},
countDown() {
if(this.counter > 0) {
this.counter--;
setTimeout(() => {
window.location.href = 'https://www.google.com';
}, 5000);
}
},
}
};
</script>

Basically what your code is doing now is waiting 5 seconds and redirecting, one side effect of it redirecting is it decrements countdown by 1.
What you need to do is decrement the counter, every second until it becomes zero, then on the next tick you want to do the redirect.
We do this by first checking to see what the count down is at. If it is above zero we want to wait for a second, then decrement the counter by one, and check again.
countDown() {
//If the counter has not reached the end
if(this.counter > 0) {
//Wait 1 second, then decrement the counter
setTimeout(()=>{
this.counter--;
this.countDown();
},1000)
}
else
{
//Count down has reached zero, redirect
window.location.href = 'https://www.google.com';
}
},

Related

Jquery Timer that starts and stops with same button

I can't for the life of my figure out how to get this to work bug free.
The button in the code below needs to do three things.
Start a countdown when clicked (works)
End the countdown automatically, and reset itself when it reaches 0(works)
Reset itself prematurely if its clicked in the middle of a countdown(works, sort of)
Bug: when clicked repeatedly it starts multiple countdowns, and more or less breaks. It needs to either reset itself or start a countdown if clicked repeatedly. There should never be more than one countdown.
It works fines as long as people press the button, wait a second, and then press it again to stop it.
The bug I'm running into is if someone spam clicks it, it starts multiple countdowns and generally just breaks the button. I've tried a lot of different methods to fix it, and this is the closest I've gotten.
var i = 29;
let running=false;
$("#startButton").click(function () {
if(running==false){
var countdown = setInterval(function () {
$("#startButton").text("Reset Timer");
running=true;
$("#stopWatch").html(i);
i--;
if (i <0)
{
$("#startButton").text("Start Timer");
running=false;
clearInterval(countdown);
i = 29;
$("#stopWatch").html(i);
}
$("#startButton").click(function () {
$("#startButton").text("Start Timer");
running=false;
clearInterval(countdown);
i = 29;
$("#stopWatch").html(i+1);
});
}, 1000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stopWatch">30</div>
<button id="startButton">Start Timer</button>
Welcome to Stack Overflow #William!
I'm not sure what this means: Reset itself prematurely if its clicked in the middle of a countdown(works, sort of). But I managed to fix your bug on spamming button click and for item 3, i just do reset the countdown from initial state. See snippets below:
// Get attribute value from div `stopwatch`. This is for resetting from default value.
var initial = $('#stopWatch').attr("value");
// Assigned initial value to var i.
var i = initial;
$("#stopWatch").html(i);
let running = false;
// Created a separate function to call from button click.
function run(timer = true) {
if (timer) {
running = true;
$("#startButton").text("Reset Timer");
$("#stopWatch").html(i);
var countdown = setInterval(function () {
i--;
$("#stopWatch").html(i);
if (i <= 0) {
running = false;
$("#startButton").text("Start Timer");
clearInterval(countdown);
i = initial;
$("#stopWatch").html(i);
}
}, 1000);
} else {
running = false;
clearInterval(countdown);
i = 0;
$("#startButton").text("Start Timer");
}
}
$("#startButton").click(function () {
// Check if its not running and var i is not 0
if(!running && i != 0) {
run();
// Check if its running and var i is not 0 to ensure that if someone spam the button it just reset the countdown.
} else if (running && i != 0) {
// Will return the else{} on function run().
run(false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stopWatch" value="30"></div>
<button id="startButton">Start Timer</button>
Added some comments on the snippet. Feel free to ask if you have any questions.

Idle timer within Vue Component

I am have some issues resetting my timer when no longer idle. I am using Vue Idle for this, which is a wrapper for idle.js.
So I have a modal with the id timeout-modal. When Vue Idle triggers the idle function, I call showWarningMessage.
Within this function, I first display my modal. I then create a timer which my modal uses to do a countdown. So this all works fine.
<script>
export default {
data() {
return {
timerId: 0,
remainingTimeoutSeconds: 10000
}
},
computed: {
second() {
return this.remainingTimeoutSeconds / 1000;
}
},
onIdle () {
this.showWarningMessage();
},
methods: {
showWarningMessage() {
this.$bvModal.show('timeout-modal');
this.warning = true;
this.timerId = setInterval(() => {
this.remainingTimeoutSeconds -= 1000;
}, 1000);
},
}
}
</script>
Now within the modal there is a continue button. When pressed, it should basically reset the above timer. At the moment I have
handleContinueButtonClick(response) {
if (response.data.success) {
console.log("IN")
this.$bvModal.hide('app-timeout-reminder-modal');
clearInterval(this.timerId);
return;
}
}
So what this should do is hide the modal, and then reset the timer back to 10 seconds. It is entering the above as the console is printing IN. The modal is also
hidden when I click OK.
However, the next time the modal is displayed, the timer is already near 0 as it did not reset back to 10.
Is there any reason why I cant get this back to 10 seconds? I thought clearInterval should reset the timer?
Thanks
I thought clearInterval should reset the timer?
Do you mean this.remainingTimeoutSeconds is set automatically when calling clearInterval?
The answer is no.
You need to reset that value as 10000 like blow;
handleContinueButtonClick(response) {
if (response.data.success) {
console.log("IN")
this.$bvModal.hide('app-timeout-reminder-modal');
this.remainingTimeoutSeconds = 10000;
clearInterval(this.timerId);
return;
}
}
or
showWarningMessage() {
this.$bvModal.show('timeout-modal');
this.warning = true;
this.remainingTimeoutSeconds = 10000;
this.timerId = setInterval(() => {
this.remainingTimeoutSeconds -= 1000;
}, 1000);
}

Javascript clearInterval does not stop setInterval

I have a javascript code that shows some messages every 6 seconds using setInterval function as bellow:
$(function () {
count = 0;
wordsArray = ["<h1>Offer received</h1>", "<h1>Offer reviewed</h1>", "<h1>Decision pending</h1>", "Offer accepted.</h1>"];
setInterval(function () {
$(".lead").fadeOut(400, function () {
$(this).html(wordsArray[count % wordsArray.length]).fadeIn(400);
});
if(count === 3){
clearInterval(window.location.href = "www.mydomain.com");
}
count++;
}, 6000);
});
When the last message is displayed I want to redirect to a URL so I checked the counter and placed a clearInterval when the last message is displayed however it does not go to the url right after the last massage is displayed but geos back to the first one and then redirect, sounds like it continues to loop. How can I fix that please?
Thanks
An interval id is returned by setInterval , you need to use that to stop particular interval.
$(function() {
count = 0;
wordsArray = ["<h1>Offer received</h1>", "<h1>Offer reviewed</h1>", "<h1>Decision pending</h1>", "<h1>Offer accepted.</h1>"];
var intervalTimer = setInterval(function() {
$(".lead").fadeOut(400, function() {
$(this).html(wordsArray[count % wordsArray.length]).fadeIn(400);
});
if (count === 3) {
clearInterval(intervalTimer);
}
count++;
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lead"></div>

Click a button 10 times and reload the page

I'm trying to make my code click a button and reload the page in Javascript. The button must be clicked 10 times every .5 seconds. When it's been clicked 10 times, I want the code to reload the page. Here's what I've got:
var rolls = 10
var q = 0
setInterval(
function() {
document.getElementById("roll").click();
q += 1
}, 500);
if (q == rolls) {
location.reload(true)
}
The following solution uses setInterval to click on the button and decreases rolls. If rolls reaches 0, then the page is reloaded. Your mistake was that your code which checked for the value of rolls ran just after the setInterval, earlier than it actually became 0.
var rolls = 10;
setInterval(
function() {
if (!(rolls--)) {
window.location.href = window.location.href;
}
document.getElementById("roll").click();
}, 500);
Try to insert the checking into the setInterval method:
var rolls = 10
var q = 0
setInterval(
function() {
document.getElementById("roll").click();
q += 1
if (q == rolls) {
location.reload(true);
}
}, 500);
you're doing the check just at the time you define the interval, so
if (q == rolls) {
location.reload(true)
}
is being called just once at the start.
put it inside the interval function like this:
setInterval(
function() {
document.getElementById("roll").click();
if (++q >= rolls) location.reload(true)
}, 500);

Exit popup + setInterval

I'm trying to create something like Exit Popup but limited to users residing on my page less than 10 seconds. I thought to use setInterval:
var counter = 0;
var myInterval = setInterval(function () {
// count
console.log(counter);
// Clear if more than 10 seconds
if ( 10 < counter ) {
console.log('Stop setInterval');
clearInterval(myInterval);
}
++counter;
}, 1000);
if ( 10 > counter ) {
// Simplified exit popup function
$(window).mouseleave(function() {
console.log('Popup');
clearInterval(myInterval);
});
}
First part of code works, but the second part executes even if counter is greater than 10. Why this is not working as it should?
No need for a counter. Just bind the event at page load, and unbind it after X seconds using a setTimeout:
$(window).bind('mouseleave', exitPopup);
setTimeout(function(){
$(window).unbind('mouseleave', exitPopup);
},10000);
function exitPopup(){
alert('Exit popup');
}
JS Fiddle Demo (3 seconds)
For this demo, make sure to put your cursor in the lower right window right at the beginning, and wait 3 seconds. It should not appear after that. If you don't wait, it'll show the popup.

Categories