When I run this script
function doGet() {
}
var seconds = 3; // seconds for HTML
var foo; // variable for clearInterval() function
function redirect() {
document.location.href = 'krunker.io';
}
function updateSecs() {
document.getElementById("seconds").innerHTML = seconds;
seconds--;
if (seconds == -1) {
clearInterval(foo);
redirect();
}
}
function countdownTimer() {
foo = setInterval(function doGet(){updateSecs()}, 1000);
}
countdownTimer();
onbeforeunload = function() {return "Stop";}; //Alert
<p>You should be automatically redirected in <span id="seconds">3</span> seconds.
</p>
Absolutely Nothing happens and I don't understand why. It's supposed to stop a third-party extension (securely) from blocking this website.
This looks like the problem:
foo = (function doGet(){updateSecs()}, 1000);
Should it not be
foo = setInterval(function doGet(){updateSecs()}, 1000);
Related
I have a Javascript countdown timer in my page. Once the counter reachers zero, I want to redirect the user to another page. However, my page is entering a redirect loop and keeps redirecting to itself.
var count=20;
setInterval(timer, 1000);
function timer()
{
if(count > 0)
{
count = count - 1;
}
else
window.location = "<?= site_url('quiz/complete/' . $session->id); ?>";
document.getElementById("timer").innerHTML = count;
}
You need to remove interval by clearInterval() function. Something like:
var count=20;
var interval = setInterval(timer, 1000);
function timer()
{
if(count > 0)
{
count = count - 1;
}
else {
clearInterval(interval);
window.location = "<?= site_url('quiz/complete/' . $session->id); ?>";
}
document.getElementById("timer").innerHTML = count;
}
Here is another simple solution with pure JavaScript displaying the countdown timer using setInterval() function:
// Countdown timer for redirecting to another URL after several seconds
var seconds = 7; // seconds for HTML
var foo; // variable for clearInterval() function
function redirect() {
document.location.href = 'http://bubencode.com';
}
function updateSecs() {
document.getElementById("seconds").innerHTML = seconds;
seconds--;
if (seconds == -1) {
clearInterval(foo);
redirect();
}
}
function countdownTimer() {
foo = setInterval(function () {
updateSecs()
}, 1000);
}
countdownTimer();
See it working on JSFiddle here: http://jsfiddle.net/bubencode/dn6xc932/
I hope you will find it helpful.
I want my countdown to stop on the click of a submit button, i searched in some pages,
but I didn't found anything.
Here is the code i want to stop on click
function countDown (count) {
if (count > 0) {
var d = document.getElementById("countDiv");
d.innerHTML = count;
setTimeout (function() { countDown(count-1); }, 1000);
document.getElementById('tiempo').value = count;
}
else
document.location = "timeover.php";
}
document.getElementById("palabra").focus();
countDown(5);
</script>
You have to save reference to timeout (actually return value of timeout will be number) and use it to cancel timeout.
var timeout = window.setTimeout(function () {
// do something
}, 1000);
// clear timeout
window.clearTimeout(timeout);
You probably got the idea. By the way, you should probably look at setInterval method since it would be better in this situation. Interval will "tick" as long until you cancel it.
Try something like this:
var stopped = false;
function countDown (count) {
if (count > 0) {
var d = document.getElementById("countDiv");
d.innerHTML = count;
document.getElementById('tiempo').value = count;
if (!stopped) {
setTimeout (function() { countDown(count-1); }, 1000);
}
}
else
document.location = "timeover.php";
}
document.getElementById("palabra").focus();
document.getElementById("mySubmitId").onclick = function () {
stopped = true;
};
countDown(5);
I am now working on a piece of code of JavaScript which will be used to redirect a page with a shown counter. The problem is, when counter reaches 0, countDown() function gets in an infinite loop which causes the page to remain the same. And of course, I could not resolve the problem yet. Can anyone help?
You can see the problem here:
http://kibristaodtuvarmis.com/index.html
Code is shown below:
var time = 10;
var page = "http://blog.kibristaodtuvarmis.com";
function countDown()
{
if (time == 0)
{
window.location = page;
return(0);
}
else
{
time--;
gett("container").innerHTML = time;
}
}
function gett(id)
{
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init()
{
if(gett("container"))
{
setInterval(countDown, 1000);
gett("container").innerHTML = time;
}
else
{
setTimeout(init, 50);
}
}
document.onload = init();
EDIT:
I have done the below changes in countDown() function and problem is resolved:
var control = false;
function countDown()
{
if (time == 0 && control == false)
{
control = true;
window.location = page;
return(0);
}
else if (time > 0)
{
time--;
gett("container").innerHTML = time;
}
else
{
return(0);
}
}
I would do something like this:
var b = false;
if (time == 0 && b == false)
{
b = true;
window.location = page;
return(0);
}
Try this part of code for by replacing your complete javascript Code :
var time = 10;
var page = "http://blog.kibristaodtuvarmis.com";
function startCount() {
time = time - 1;
console.log(time);
document.getElementById("container").innerHTML = time;
startCounter();
}
function startCounter() {
if (time !== 0) {
setTimeout(function () {
startCount();
},1000);
} else {
location.href = page;
}
}
if (window.addEventListener) {
window.addEventListener("load", startCount, false);
} else if (el.attachEvent) {
window.attachEvent("load", startCount);
}
I tried it, It works.
Tell me your reply after testing.
Are you wanting it to stop at 0? Assign the setInterval to a var and then use clearInterval if 0
your setIinterval continues executing before change the window.location and then causes this loop because time is 0 and should launch window.location again
you should clear the interval
var IdInterval = setInterval(function () {
//.... code
}, 10000);
and after the first execution of countDown with time==0 then:
clearInterval(IdInterval);
My Jquery:
function myTimer() {
var sec = 15
var timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
}
$("#knap").click(function() {
myTimer();
});
$("#reset").click(function() {
// set timer to 15 sec again..
});
I want the timer to be reset when clicked on #reset.
You need to leave your "timer" variable in a scope that is available the next time you call the myTimer function so you can clear the existing interval and reset it with a new interval. Try:
var timer;
functionn myTimer() {
var sec = 15
clearInterval(timer);
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
}
$("#knap").click(function() {
myTimer();
});
$("#reset").click(function() {
myTimer();
});
or you could do something along these lines:
var myTimer = function(){
var that = this,
time = 15,
timer;
that.set = function() {
console.log('setting up timer');
timer = setInterval(function(){
console.log('running time: ' + time);
},1000);
}
that.reset = function(){
console.log('clearing timer');
clearInterval(timer);
}
return that;
}();
and run when you need to:
myTimer.set();
myTimer.reset();
Clear the timer every time it's initalized, that way all you have to do is call the function again to reset the timer :
var timer;
function myTimer(sec) {
if (timer) clearInterval(timer);
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
}, 1000);
}
$("#knap, #reset").click(function() {
myTimer(15);
});
FIDDLE
You could re-write your myTimer() function like so:
function myTimer() {
var sec, timer = null;
myTimer = function() {
sec = 15;
clearInterval( timer );
timer = setInterval(function() {
$('#timer').text(sec--);
if (sec == -1) {
clearInterval(timer);
alert('done');
}
} , 1000);
};
myTimer();
}
Now, whenever you call myTimer(), the setInterval gets reset.
Here's an approach that is more in tune with the way JS was designed (as a functional language for those who still don't know). Rather than relying on a global variable, use a closure:
$("#knap").click(function start()//named callback to bind && unbind:
{
$(this).unbind('click');//no need to start when started
$("#reset").unbind('click').click((function(timer)
{//timer is in scope thanks to closure
return function()
{//resets timer
clearInterval(timer);
timer = null;
$('#knap').click(start);//bind the start again
//alternatively, you could change the start button to a reset button on click and vice versa
}
})(setInterval((function(sec)
{
return function()
{
$('#timer').text(sec--);
if (sec === -1)
{
$('#reset').click();//stops interval
$('#reset').unbind('click');//no more need for the event
alert('done');
}//here's the interval counter: 15, passed as argument to closure
})(15),1000)));//set interval returns timer id, passed as argument to closure
});
Now I will admit this is rather messy (and untested) but this way there reset event is only available when it's necessary, and you're not using any globals. But crucially, this is where JS's power lies: functions as 1st class objects, passing them as arguments and return values... just go function-crazy :)
I've set up a working Fiddle, too
You could also use a jQuery timer plugin, then you don't need to pass around the Variable.
Plugin: http://archive.plugins.jquery.com/project/timers
Example for the plugin: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/
I have a simple countdown using setinterval and I get the error that my functions are not defined. I am using the buttons to start and stop the intervals. Any ideas why this happens?
Javascript
function startCount() {
$(function() {
var count = 10;
countdown = setInterval(function() {
$("p.countdown").html(count + " seconds remaining!");
if (count === 0) {
window.location = 'http://google.com';
}
count--;
}, 1000);
});
}
function startStop() {
clearInterval(countdown);
}
html
<p class="countdown"></p>
<button onclick="startCount()">Start</button>
<button onclick="startStop()">Stop</button>
demo
http://jsfiddle.net/54uQz/1/
Declare your countdown variable outside the startCount() function so that it is visible to both functions. At the moment it only exists in the first, so clearing the timer does nothing.
CODE:
var countdown;
function startCount() {
var count = 10;
countdown = setInterval(function() {
$("p.countdown").html(count + " seconds remaining!");
if (count === 0) {
window.location = 'http://google.com';
}
count--;
}, 1000);
}
function startStop() {
clearInterval(countdown);
}
The Updated Fiddle Example!