I'm writing some code that looks like this
<script type="text/javascript">
setInterval(function write_numbers(){
var count = 1;
var brk = "<br>"
while (count < 1218){
document.write(count + brk);
count++;
}},1000)
</script>
I need it to display the first number which is one then wait one second then display the next number (2) then wait a second, I need this to carry on till it reaches 1218 then stop.
With the code I've written it just writes all the numbers up, waits a second then repeats all the numbers again.
I'm quite new to coding so i don't know how to fix this.
If someone could tell me how to do it, it would be greatly appreciated.
There are multiple issues in your code, although you are using setInterval(), since you have a while loop inside it, the complete loop will be executed every 1 second.
Instead you need to have the setInterval() callback use an if statement to check whether to print the value or not like
var count = 1;
var interval = setInterval(function write_numbers() {
if (count <= 1218) {
document.body.appendChild(document.createTextNode(count));
document.body.appendChild(document.createElement('br'));
count++;
} else {
clearInterval(interval);
}
}, 1000)
The below script should do the trick for you:
<script>
var count = 1;
var brk = "<br>";
var myVar = setInterval(function(){ myTimer() }, 1000); // This should be a global variable for clearInterval to access it.
function myTimer() {
document.write(count + brk);
count++;
if(count > 1218){
myStopFunction();
}
}
function myStopFunction() {
clearInterval(myVar);
}
</script>
two issues
1) If you are using setInterval then you must clear the interval as well otherwise it will be an infinite loop
2) use if rather than while so that number is printed one by one.
try this
var count = 1;
var interval1= setInterval(function write_numbers(){
var brk = "<br>"
if (count < 1218)
{
document.write(count + brk);
count++;
}
else
{
count = 1;
clearInterval(interval1);
}
},1000);
First, you should define count outside setInterval. Defining inside will reset it every time.
Second, while (count < 1218){} should be a conditional statement. I have considered if(count>= 1218) as termination condition.
Third, when even you use setInterval, remember to use clearInterval as well.
Code
var count = 1;
var interval = setInterval(function write_numbers() {
var brk = "<br>"
document.write(count + brk);
count++;
if (count >= 10) {
window.clearInterval(interval);
}
}, 1000)
Try this code man , only one change from your code.
count variable declare out side of the setInterval function
<script type="text/javascript">
var count = 1;
setInterval(function write_numbers(){
var brk = "<br>"
if (count < 1218)
{
document.write(count + brk);
count++;
}
},1000);
</script>
Related
I'm newbie in JS/jQuery, and got quite confused about the usage of stopping a setInterval function from running in x ms (or after running X times), which apparently happens with clearInterval. I know this question was asked similarly before, but couldn't help me.
As you see, it starts with 1000ms delay, and then repeat for 9000ms (or after running 3 times if better??), and then it needs to stop. What's the most ideal way of doing this? I couldn't properly use the clearInterval function. Thanks for the answers!
var elem = $('.someclass');
setTimeout(function() {
setInterval(function() {
elem.fadeOut(1500);
elem.fadeIn(1500);
},3000);
},1000);
To stop the interval you need to keep the handle that setInterval returns:
setTimeout(function() {
var cnt = 0;
var handle = setInterval(function() {
elem.fadeOut(1500);
elem.fadeIn(1500);
if (++cnt == 3) clearInterval(handle);
},3000);
},1000);
Create a counter, and keep a reference to your interval. When the counter hits 3, clear the interval:
var elem = $('.someclass');
setTimeout(function() {
var counter = 0;
var i = setInterval(function() {
elem.fadeOut(1500);
elem.fadeIn(1500);
counter++;
if (counter == 3)
clearInterval(i);
},3000);
},1000);
Given what you are trying to do is quite static, why not simply add delays and forget all the timers.:
var elem = $('.someclass');
elemt.delay(1000).fadeOut(1500).fadeIn(1500).delay(3000).fadeOut(1500).fadeIn(1500).delay(3000).fadeOut(1500).fadeIn(1500).delay(3000);
Or run the above in a small loop if you want to reduce the code size:
elemt.delay(1000);
for (var i = 0; i < 3; i++){
elemt.fadeOut(1500).fadeIn(1500).delay(3000);
}
You just need to clear the interval after three times:
setTimeout(function() {
var times = 0;
var interval = setInterval(function() {
elem.fadeOut(1500);
elem.fadeIn(1500);
if (++times > 3) clearInterval(interval);
},3000);
},1000);
I have a simple JavaScript function, that looks like this:
countDown();
function countDown() {
var count = 10;
document.write(count);
if (count > 0) {
count = count-1;;
setTimeout(countDown, 1000);
}
}
Why does the variable count never change? This function never ends . . .
Because the countDown() function sets the variable count to ten every time it is called. A slight scoping change will make the function behave as you might have intended.
var count = 10;
countDown();
function countDown() {
document.write(count);
if (count > 0) {
count = count-1;;
setTimeout(countDown, 1000);
}
}
I have to change the source of an image every second. I have a for loop in which a call a function that has a timeout. I read that here, on stackOverflow, but it doesn't work. Can please someone tell me what can I fix to make it work? I've been struggling with this for much more that I'd like to admit. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
function changeImage(k) {
setTimeout(function(){
document.getElementById("img").src = k + ".png"; alert(k );}, 1000);
}
function test() {
for (var k = 1; k <= 3; k++) {
changeImage(k);
}
}
</script>
</head>
<body>
<div id="main_img">
<img id="img" src="http://placehold.it/110x110">
</div>
<input type="button" style="width: 200px" onclick="test()" />
</body>
In your code, you set all the timeouts at once. So if you set them all one second from now they all fire one second from now.
You are already passing in the index k so just multiply the time parameter by k.
setTimeout(function(){
document.getElementById("img").src = k + ".png";
alert(k);
}, k * 1000);
// ^ added
The problem is that you are creating instances of a timer milliseconds apart. One second later, they all execute milliseconds apart as well. What you need is to execute them at a set interval apart from each other.
You can use a timer using setInterval, which executes the provided function at a given interval. Don't forget to kill-off the timer though, otherwise it will run forever.
Minor optimizations
You can cache the element in a variable so you won't be hitting the DOM that frequently.
Also, I'd avoid the alert(). If you are debugging, use breakpoints in the debugger. If you really want it to be "alert-like", then use console.log and watch the console.
An advantage of setInterval over a recursive setTimeout is that you will not be spawning multiple timers per iteration, but instead, just one timer.
And here's the proposed solution:
var k = 0;
var image = document.getElementById("img");
var interval = setInterval(function() {
// Increment or clear when finished. Otherwise, you'll leave the timer running.
if(k++ < 3) clearInterval(interval);
image.src = k + ".png";
// Execute block every 1000ms (1 second)
},1000);
Instead of using loop, you can do it like this:
var k = 0;
var int = setInterval(function() {
if (k <= 3) k++;
else { clearInterval(int); }
document.getElementById("img").src = k + ".png";
alert(k);
}, 1000);
My advice is to use console.log() or alert() to help you debug - it'll make it a LOT more obvious what's going on. For instance, if you put a console.log in your test or setTimeout functions, you'd see that all three images were getting added at the same time.
What I'd recommend is to declare your "nextImage" function, then define your setTimeout within that function. That way it'll call itself every second.
Another tip: I assume you want the three images to loop forever, so I added an often used trick with the modulus operator (%) to accomplish this.
Have a look:
Working demo: http://jsfiddle.net/franksvalli/PL63J/2/
(function(){
var numImages = 3, // total count of images
curImage = 1, // start with image 1
$image = document.getElementById("img"),
imageBase = "http://placehold.it/110x11";
function nextImage() {
$image.src = imageBase + curImage;
// increment by one, but loop back to 1 if the count exceeds numImages
curImage = (curImage % numImages) + 1;
// execute nextImage again in roughly 1 second
window.setTimeout(nextImage, 1000);
}
// initializer. Hook this into a click event if you need to
nextImage();
})();
As other folks have said, you probably want to use setInterval, which you can do with some tweaks:
(function(){
var numImages = 3, // total count of images
curImage = 1, // start with image 1
$image = document.getElementById("img"),
imageBase = "http://placehold.it/110x11";
function nextImage() {
$image.src = imageBase + curImage;
// increment by one, but loop back to 1 if the count exceeds numImages
curImage = (curImage % numImages) + 1;
}
// initializer. Hook this into a click event if you need to
nextImage(); // call function immediately without delay
window.setInterval(nextImage, 1000);
})();
The problem
setTimeout doesn't stop the program execution but only sets up an event for a callback in 1 second. What that means is that if you setup three setTimeout's inside your for loop, they will execute simultaneously after 1 second.
A solution
Instead of using a for loop, you can use a delayed recursion.
function changeImage(imageIndex) {
document.getElementById("img").src = imageIndex + ".png";
alert(imageIndex);
}
function myLoop( imageIndex ) {
if( imageIndex >= 3 ) return;
changeImage( imageIndex );
setTimeut( function() { myLoop(imageIndex + 1) }, 1000 );
}
setTimeut( function() { myLoop(0) }, 1000 );
Another solution using setInterval
var interval = null;
var imageIndex = 0;
function changeImage() {
document.getElementById("img").src = imageIndex + ".png";
alert(imageIndex);
imageIndex++;
if( imageIndex === 3 ) clearInterval( interval );
}
interval = setInterval( changeImage , 1000);
Using different delays
function changeImage(imageIndex) {
document.getElementById("img").src = imageIndex + ".png";
alert(imageIndex);
}
for( var i=0; i < 3; i++) {
setTimeout( changeImage.bind(window, i), i * 1000 );
}
A groovy one liner( please don't use this, ever! )
(function f(i) { setTimeout( changeImage(i) || f.bind(window, i = (i++)%3), 1000); })(0)
WHY IT DOESN'T WORK?
Because Javascript always passes variables by reference. When your code is waiting on the queue, the variables have already changed.
MY SOLUTION:
Create an array and push whatever codes you want to execute in order of appearance (Place the real value of the variables directly) e.g.:
var launcher = [];
launcher.push('alert("First line of code with variable '+ x +'")');
launcher.push('alert("Second line of code with variable '+ y +'")');
launcher.push('alert("Third line of code with variable '+ z +'")');
Use setInterval instead of setTimeout to execute the codes (You can even change the delay period dynamically) e.g.
var loop = launcher.length;
var i = 0;
var i1 = setInterval(function(){
eval(launcher[count]);
count++;
if(i >= loop) {
clearInterval(i1);
}
}, 20);
I want a simple JavaScript countdown which counts to 5 and then stops. I want to show the current value (1,2,3,4,5)
I tried:
function countdown() {
jAlert('test', i);
i++;
if (i >= 5) {
clearInterval(aktiv);
}
};
var aktiv = setInterval('countdown()', 1000);
var i = 0;
But every time I insert that i in to jAlert it wont work any more. What is wrong there?
var $i = 0;
var $interval = setInterval(function()
{
if (++$i === 5)
clearInterval($interval);
jAlert('test', $i);
},
1000);
function countdown () {
// try to see if passing a string, rather than a number works.
jAlert('test', i + '');
i++;
if (i >= 5) {
clearInterval(aktiv);
}
};
var aktiv = setInterval(countdown, 1000);
var i=0;
Also open the firebug console and tell us what error you are getting when you put the i in jAlert. Or make a jsFiddle if possible.
Try to amend this line:
var aktiv = setInterval('countdown()', 1000);
To this:
var aktiv = setInterval(countdown, 1000);
Because when I tried javascript for the first time, this interval thingy wouldn't work if i had quotes and / or parenthesis after the function name.
Look at this code
var count = 0, count2 = 0
setInterval(function() {
// I wrote this on two lines for clarity.
++count;
count2 = count;
}, 1000);
if(count2==5)
{
alert('testing script')
}
How come the if statement does not execute when count2 = 5
The problem is: First you only define the logic for the interval and then you check the count2 variable. But in that context the variable has still the value 0.
Each time the interval is fired (and in most cases it is after the if-check), only the part inside the function() { } block is executed
function() {
// I wrote this on two lines for clarity.
++count;
count2 = count;
}
and it is not continued to the if statement because it is not part of the interval logic.
The first idea I have is to put the if statement into the function() { } block like this:
var count = 0, count2 = 0;
setInterval(function() {
// I wrote this on two lines for clarity.
++count;
count2 = count;
if(count2 == 5)
{
alert('testing script');
}
}, 1000);
var count = 0, count2 = 0 // missing semi colon(!)
setInterval(function() { // this function will be executed every 1000 milliseconds, if something else is running at that moment it gets queued up
++count; // pre-increment count
count2 = count; // assign count to count 2
}, 1000);
// ok guess what this runs IMMEDIATELY after the above, and it only runs ONCE so count 2 is still 0
if(count2==5) // DON'T put { on the next line in JS, automatic semi colon insertion will get you at some point
{
alert('testing script')
}
Read a tutorial to get started: https://developer.mozilla.org/en/JavaScript/Guide.
yes it can store a value.
function hello(){
var count = 0;
var timer = setInterval( function(){ count+=1;alert(count); },2000);
}
Try This Out, it works
//Counting By Z M Y.js
if(timer){window.clearInterval(timer)} /*← this code was taped , in order to avoid a sort of bug , i'm not going to mention details about it */
c=0;
do{ w=prompt('precise the number of repetition in which the counting becomes annoying',10)}
while (!(w>0)||w%1!=0)
function Controling_The_Counting(c,w)
{
if(c%w==0&&c>0){return confirm('do you want to continue ?'); }
return true;
}
var timer = setInterval( function(){ console.clear();c+=1;console.log(c); StopTimer() },1000);
function StopTimer() { if(!Controling_The_Counting(c,w)) {window.clearInterval(timer) ;} }