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) ;} }
Related
So I have a for loop and there is one line of code in there that opens a URL for each other iterations. I would like that line that opens the URL to wait 2 seconds before opening each one. How would I do it?
I tried the setTimeout function, but it iterates through the whole loop instantly after waiting the specified seconds, but I want it to wait for each iteration, not just before the iteration or during the first one.
The structure of my code looks something like this:
function someFunction(){
// do something
for(i = 0; i < range; i++){
//do something
//**open URL**
//do something
}
}
How would I make it wait 2 seconds for every iteration before executing that one specific line where it opens the URL? None of the other questions seem to help me, so I was wondering if anyone could help.
You can use settimeout
function delayedFunction(counter){
counter--;
console.log(counter);
if(counter){
setTimeout(function(){delayedFunction(counter); }, 1000);
}
}
delayedFunction(5);
You cannot do this in a for loop. You can do this with setInterval(). The setInterval() method will continue until clearInterval() is called.
Structure
var interval = setInterval(function() {
var i = 0;
if(i < x) {
...
} else {
clearInterval(interval);
}
}, ms);
Example
var urls = ["url1", "url2", "url3", "url4"];
function showDelayed(arr, ms) {
var i = 0;
var interval = setInterval(function() {
if (i < arr.length) {
// Do something here
console.log(arr[i]);
} else {
clearInterval(interval); // Clear when i === arr.length
}
i += 1; // Interval increments 1
}, ms);
}
showDelayed(urls, 300);
Not that this is a very good practice (opening up multiple URLS on an interval),
but since you asked.
var urlarray = ["https://www.mysite1.com", "https://www.mysite2.com", "https://www.mysite3.com"];
var currentURL = 0;
setInterval(function() {
if (currentURL < urlarray.length) {
alert(urlarray[currentURL]);
}
currentURL++;
}, 1500);
I want to slow down console.log in my loop
// function update to actualize value
function update() {
requestAnimationFrame(update);
analyser.getByteFrequencyData(data);
var count=0;
for (var i=data.length; i--;) {
count+=data[i];
if(count >= 1) {
console.log(data);
}
};
}
For example, show one console.log immediatly, and then, each .5s
How can we do that ?
(maybe with setTimeout() but I don't want start delay)
The simplest way would be to introduce a timeout before running the update again each time...
// function update to actualize value
function update() {
analyser.getByteFrequencyData(data);
var count=0;
for (var i=data.length; i--;) {
count+=data[i];
if(count >= 1) {
console.log(data);
}
};
requestAnimationFrame(function() {
setTimeout(update, 5000);
});
}
I used setTimeout() in preference over setInterval() as doing it this way (as well as moving the call to the end of the function) will make sure everything is completed, before starting the 5 second pause. It ensures there's no overlap, should the preceeding code take longer than 5 seconds.
First create a variable to store the time of the last console.log. Next, update that variable each time you console.log a value. Finally, add a check for the threshold.
var lastOutput = 0; // Setting this to 0 initially will ensure it runs immediately
var outputThreshold = 500; // in milliseconds
function update() {
requestAnimationFrame(update);
analyser.getByteFrequencyData(data);
if (new Date().valueOf() - lastOutput > outputThreshold) {
// threshold met, output and update
var count=0;
for (var i=data.length; i--;) {
count+=data[i];
if(count >= 1) {
console.log(data);
}
};
lastOutput = new Date().valueOf();
}
}
update(); // fire first call to update, after that requestAnimationFrame() will handle future calls
If you want the time delay inside the for loop, you'd do this:
function update() {
requestAnimationFrame(update);
analyser.getByteFrequencyData(data);
var i = data.length - 1, count = 0;
function logger() {
count += data[i];
if (count >= 1)
console.log(data);
if (i-- >= 0)
setTimeout(logger, 500);
}
logger();
}
Now, things are going to be pretty messy because you're also using requestAnimationFrame() to schedule another iteration of the whole thing; that really won't make sense anymore. You'll probably want to have that wait until the logging process is done:
function update() {
analyser.getByteFrequencyData(data);
var i = data.length - 1, count = 0;
function logger() {
count += data[i];
if (count >= 1)
console.log(data);
if (i-- >= 0)
setTimeout(logger, 500);
else
requestAnimationFrame(update);
}
logger();
}
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>
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'm currently trying to wrap my head around some JavaScript.
What I want is a text to be printed on the screen followed by a count to a given number, like so:
"Test"
[1 sec. pause]
"1"
[1 sec. pause]
"2"
[1 sec. pause]
"3"
This is my JS:
$(document).ready(function() {
var initMessage = "Test";
var numberCount = 4;
function count(){
writeNumber = $("#target");
setTimeout(function(){
writeNumber.html(initMessage);
},1000);
for (var i=1; i < numberCount; i++) {
setTimeout(function(){
writeNumber.html(i.toString());
},1000+1000*i)};
};
count();
});
This is my markup:
<span id="target"></span>
When I render the page, all I get is "Test" followed by "4".
I'm no JavaScript genius, so the solution could be fairly easy. Any hints on what is wrong is highly appreciated.
You can play around with my example here: http://jsfiddle.net/JSe3H/1/
You have a variable scope problem. The counter (i) inside the loop is only scoped to the count function. By the time the loop has finished executing, is value is 4. This affects every setTimeout function, which is why you only ever see "4".
I would rewrite it like this:
function createTimer(number, writeNumber) {
setTimeout(function() {
writeNumber.html(number.toString());
}, 1000 + 1000 * number)
}
function count(initMessage, numberCount) {
var writeNumber = $("#target");
setTimeout(function() {
writeNumber.html(initMessage);
}, 1000);
for (var i = 1; i < numberCount; i++) {
createTimer(i, writeNumber);
}
}
$(document).ready(function() {
var initMessage = "Test";
var numberCount = 4;
count(initMessage, numberCount);
});
The createTimer function ensures that the variable inside the loop is "captured" with the new scope that createTimer provides.
Updated Example: http://jsfiddle.net/3wZEG/
Also check out these related questions:
What's going on under the hood here? Javascript timer within a loop
JavaScript closure inside loops – simple practical example
In your example, you're saying "2, 3, 4 and 5 seconds from now, respectively, write the value of i". Your for-loop will have passed all iterations, and set the value of i to 4, long before the first two seconds have passed.
You need to create a closure in which the value of what you're trying to write is preserved. Something like this:
for(var i = 1; i < numberCount; i++) {
setTimeout((function(x) {
return function() {
writeNumber.html(x.toString());
}
})(i),1000+1000*i)};
}
Another method entirely would be something like this:
var i = 0;
var numberCount = 4;
// repeat this every 1000 ms
var counter = window.setInterval(function() {
writeNumber.html( (++i).toString() );
// when i = 4, stop repeating
if(i == numberCount)
window.clearInterval(counter);
}, 1000);
Hope this helps:
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('target').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}