loop setinterval stopping javascript - javascript

This is my code.
This is probably a dumb question, but I really need help!
Thank you, and here is my code:
<script>
function dodat(){
var btn=document.createElement("div");
btn.style.width="25px";
btn.style.height="25px";
btn.style.backgroundColor="red";
btn.style.boxShadow="inset 0px 0px 0px 2px black";
btn.style.position="absolute";
btn.style.left="0px";
mycars = new Array();
numba = Math.round(Math.random()*1000);
btn.id=numba;
mycars[numba] = 0;
setInterval('mycars[numba] = mycars[numba]+1;document.getElementById(numba).style.left=mycars[numba];', '10');
document.getElementById("track").appendChild(btn);
}
</script>
<body>
<div style="background-color:#c3c3c3;width:500px;height:25px;overflow:hidden;position:relative;" id="track"></div>
</body>
<script>
setInterval("dodat();", "1000");
</script>
I want it so that when a new blob is called, the last one continues until it goes into the end of the other side, instead it stops when a new one is called.
I'm okay with any solution, JavaScript, jQuery or whatever you please. :)

Your setInterval function is off. setInterval take a function and a time (milliseconds)
setInterval(function(){
//code
}, 30000);

if you want to keep the format you have try:
setInterval(step,timeToStep);
In this case step is a function
var step = function(){ ... };
and time is just a your time
var timeToStep = 1000;
or even set it to a var like
stepping = setInterval(step,timeToStep);
this way you could call clear interval in a more clear way ,if you like clearInterval(stepping);,

Related

How can i add a div based on TIME using js or jquery?

I want to create a timer that will add or remove divs ( inline divs ) based on time function in Javascript or Jquery.
E.g With each second i want to add a div or remove a div.
Can i get some ideas on this?
<html>
<head>
<title>Testing</title>
<script>
var i = 0;
var myVar=setInterval(function () {myTimer()}, 1000);
function myTimer()
{
document.getElementById('Container').innerHTML += "<div id='"+i+"'>This is the Div with New ID 'i'</div>";
i++;
}
</script>
</head>
<body>
<div id='Container'>
</div>
</body>
</html>
This Should Create a DIV each second inside the Div with id 'Container'
Use setInterval.
var diff = 1000, // how long between adds in milliseconds
totalTime = 0, // how long we have run
maxTime = 1000*60*60*5, // how long we want to run
interval = setInterval(function() {
$(".parentDiv").append($("<div>new div</div>"));
totalTime += diff; // keep track of all of our time
if (totalTime >= maxTime) {
clearInterval(interval);
}
},diff);
Note that the time is in milliseconds.
And to get rid of it
clearInterval(interval);
Beware that it will keep running, and if any of your actions take too long or slow down, you could find yourself with quite the mess stumbling over each other.
You can make use of setTimeout(function, mili seconds)
var testTimer;
function timer()
{
// Do your stuff
testTimer = setTimeout("timer()",1000);
}
This will call your timer function every one second. and you can do your stuff in this function
To stop this timer function you can do
window.clearTimeout(testTimer);

HTML count bar code error

Non-working code:
<html>
<body>
<p id="timeCountBar">-></p>
<script>
var timeCountBarText = document.getElementById("timeCountBar").innerHTML;
function subCount(){
timeCountBarText="-"+timeCountBarText;
document.getElementById('timeCountBar.innerHTML').innerHTML=timeCountBarText;
}
function countTime(){
for (int i; i < 100; i++){
setTimeout("subCount",10);
}
//something to do after counting has ended
}
countTime();
</script>
</body>
</html>
Only showed -> and nothing else happened.
What should I do?
SOLVED:
HTML:
<p id="timeCountBar">-></p>
JavaScript:
var timeCountBarText = document.getElementById("timeCountBar").innerHTML;
var sc = setInterval(function(){subCount()}, 10);
var i=0;
var subCount = function() {
timeCountBarText = "-" + timeCountBarText;
document.getElementById('timeCountBar').innerHTML = timeCountBarText;
i=i+1;
if(i==100){
clearInterval(sc);
}
}
You can see it working here:
http://jsfiddle.net/aniruddha153/Ezres/
You had 3 problems:
Logic was not entirely correct.
you should not use setTimeout. Instead you should use setInterval. And the right way to declare setInterval is
setInterval(function(){subCount()}, 10);
You need to use clearInterval
Reference: JavaScript Timing Events
You have two major problems.
The first is easily discovered by looking at the JavaScript console in your browser.
JavaScript is not JavaScript, int should be var.
The second is that setTimeout is not sleep. You need to call subCount either recursively with setTimeout or by using setInterval instead of using a for loop.

javascript clearTimeout not clearing timeout!.. this shouldn't be hard?

I'm working on a auto logout using setTimeout and clearTimeout. Should be really straight forward but the clear timeout doesn't seem to stop the timeout and the function is called anyway. I have it set up that the session variable populates a text input that the javascript then reads and compares to the time now. if the difference is more than or equal to 20 seconds an overlay div shows giving an option to renew the session or it will logout in 10 seconds. The script that check the last activity auto runs every ten seconds. Obviously once I've got it working the timings will be longer - these are just for testing purposes.
I have trawled the web but can't seem to find an obvious solution as it not so complicated and looks like it really should just work!
Here's my code:
var t = 0;
function check_status(){
var time_now = Math.floor(new Date().getTime() / 1000);
var last_activity = document.getElementById("last_activity").value;
var since_last_activity = time_now-last_activity;
console.info(since_last_activity);
if(since_last_activity >= 20){
// show div
document.getElementById("logout_warning").style.height = document.documentElement.clientHeight+"px";
document.getElementById("logout_warning").style.display = 'block';
// start countdown
var t = setTimeout("logout();", 10000);
}
}
function logout(){
document.getElementById("logout_warning").style.display = 'none';
location.href="/user/logout";
}
function renew(){
clearTimeout(t);
var time_now = Math.floor(new Date().getTime() / 1000);
document.getElementById("last_activity").value = time_now;
document.getElementById("logout_warning").style.display = 'none';
}
setInterval('check_status()', 10000);
and then in the body...
<div id="logout_warning" style="display:none; width:100%; height:500px; top:0px; left:0px; position:absolute; background-image:url('/images/overlay.png'); z-index:100000;">
<div style="width:300px; position:relative; margin:200px auto; border:1px solid #000000; background-color:#FFFFFF; padding:10px; text-align:center;">
You're going to be logged out in 10 seconds! oh no!<br/><br/>
<button type="button" onclick="renew();">Click here</button> to renew your session
</div>
</div>
The last activity variable is pulled from a text input that is populated by a session variable. This bit seems to work, as in when you click the renew button the value of the input is changed and the console output shows that the time since last activity has been reset.
I hope this makes sense. Please ask for clarification but I'm really stumped on this one!
Thanks!
You have two ts.
var t = 0;
This one in the outside scope.
var t = setTimeout("logout();", 10000);
This one in the inside scope.
clearTimeout(t);
This is reading the one on the outside scope.
Remove the var from the one on the inside scope.
That's because you're redefining the variable in the function and it becomes local to that function, the global t is still 0:
var t = setTimeout("logout();", 10000);
remove the var before the variable!
You're overshadowing the global variable t with a local one:
var t = 0;
function check_status() {
var t = setTimeout("logout();", 10000);
// ^^^^
}
function renew() {
clearTimeout(t);
}
Remove the var to make t refer to the global variable.

JavaScript Countdown Timer not starting [Code Included]

I'm trying to make a countdown timer using JS, obviously.
I think my code is correct, but it does not work.
Objective of the code:
The code suppose to show a timer decreasing until it show the content which is DONE in the alst line of the code.
Problem: I've tried making an HTML page on my local machine and tested it but it didn't work, also I've uploaded it on my website and it does not work too.
Code:
<body>
<div
id="JSPractice5"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
Countdown Starting
</div>
<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
var timerID = setInterval("CountdownTimer()",1000);
function CountdownTimer() {
if(number > 1) {
number--;
ReplaceContentInContainer(containerID,number); //Mark1
}
else {
clearInterval(timerID);
ReplaceContentInContainer(containerID,'DONE!!');
}
}
</script>
</body>
If the solution of the problem is easy/stupid and you thought of down voting it, please don't do, because I'm very new to SOF and JS :)
Thanks in Advance guys.
You're missing
function ReplaceContentInContainer(id, content)
{
document.getElementById(id).innerHTML = content;
}
Redo your setInterval call to specify the function itself, rather than a string containing a call.
See http://jsfiddle.net/2zwbV/2/ for a working example.
<body>
<div
id="JSPractice5"
style="border-style:dotted;
padding:10px;
font-size:24px;
width:200px;
text-align:center;">
Countdown Starting
</div>
<script type="text/javascript">
var containerID = "JSPractice5";
var number = 100;
function CountdownTimer() {
if(number > 1) {
number--;
ReplaceContentInContainer(containerID,number);
}
else {
clearInterval(timerID);
ReplaceContentInContainer(containerID,'DONE!!');
}
}
var timerID = setInterval(CountdownTimer(),1000);
</script>
</body>
First, the timerID should be after CountdownTimer function because if not you are going to call a non existing function, second is that the function CountdownTimer should't be in quotes.

How to display a blinking / flashing link in html

I am in need a link that will flash every 500 milleseconds, for a duration of 5 seconds...
I remember long ago having a link like this, but deleted it because one could only click it when it was visible. Is there a workaround for that?
Try this:
<script type="text/javascript">
var col = new String();
var x=1;var y;
function blink()
{
if(x%2)
{
col = "rgb(255,0,0)";
}else{
col = "rgb(255,255,255)";
}
aF.style.color=col;x++;if(x>2){x=1};setTimeout("blink()",500);
}
</script>
<body onload="blink()">
<a id="aF" href="http://www.google.com"><b>*Google!*</b><br>
There is a JavaScript function in Script.aculo.us to do that : Have a look on Effect.Pulsate
There is CSS
text-decoration: blink
but that will blink your link all the time, you would need some javascript to change the style after 5 seconds.
Remember to always keep usability for all users in mind. Especially if you're making something flash at a certain frequency. Just be careful.
'A' quick JQuery UI version...
Links need CLASS 'flasher', and an ID
Will start on mouseover...and stop on mouseout.
Also add the secondarycolor as a hover to the 'A' link...it will help mask the initial interval delay at start.
var flashInterval;
var flasherId;
var firstColor = '#EF7F2C';
var secondaryColor = '#3296C8';
var flashTime = 300;
jQuery('a.flasher').mouseover(function() {
if(flasherId){ jQuery('#'+flasherId).animate({ color:firstColor},0); }//stop any previous flashing link
flasherId = jQuery(this).attr('id');//get id of current link
//set interval
flashInterval = setInterval(function(){ jQuery('#'+flasherId).animate({ color:secondaryColor},flashTime).animate({ color:firstColor},flashTime); },flashTime*2);
}).mouseout(function() {
clearInterval(flashInterval);//clear interval
jQuery('#'+flasherId).animate({ color:firstColor},0);//reset flasher
flasherId = '';//clear flasher var
});

Categories