Develop Reference

Confused about SetInterval and closures

How can we repeatedly update the contents of a div using setInterval
I am using the question from this link as a reference How to repeatedly update the contents of a <div> by only using JavaScript?
but i have got few questions here
Can we do it without anonymous functions,using closures. I have tried but could not end up with any workable solution.
How can we make it run infinitely, with the following code it gets stopped once i reaches 10.
window.onload = function() {
var timing = document.getElementById("timer");
var i = 0;
var interval = setInterval(function() {
timing.innerHTML = i++;
if (i > 10) {
clearInterval(interval);
i = 0;
return;
}
}, 1000);
}
<div id="timer"></div>
I am confused about setIntervals and closures
can some one help me here
Thanks

You could do something like this with a closure. Just reset your i value so, you will always be within your given range.
window.onload = function() {
var updateContent = (function(idx) {
return function() {
if (idx === 10) {
idx = 0;
}
var timing = document.getElementById("timer");
timing.innerHTML = idx++;
}
})(0);
var interval = setInterval(updateContent, 1000);
}
<div id="timer"></div>

This one should be clearer.
function updateTimer() {
var timer = document.getElementById("timer");
var timerValue = parseInt(timer.getAttribute("data-timer-value")) + 1;
if (timerValue == 10) {
timerValue = 0;
}
timer.setAttribute("data-timer-value", timerValue);
timer.innerHTML = "the time is " + timerValue;
}
window.onload = function() {
setInterval(updateTimer, 1000);
}
<div id="timer" data-timer-value="0"></div>

How to create fadein effect in JavaScript using for-loop and anonymous function call

i am creating a simple fadein effect using pure javascript. For this i have tried three methods. M1 is using recursive functionality and M2 is based on for loop and anonymous function and M3 is based on for loop and string based function call.
Under M1 the code is giving perfect output as a fadein effect.
But under M2 the fadein effect does not work and the content directly goes visible after a specified duration.
Now again under M3 the fadein effect is generated.
Can anyone guide me that how to generate fadein effect based on M2. Means using for loop and anonymous function call.
M1------ Works perfectly------ http://jsfiddle.net/TH2dn/7/
function starter(){
var i = 0;
var el = document.getElementById("div1");
fadeIn(el,i);
}
function fadeIn(el,i) {
i = i + 0.01;
seto(el,i);
if (i<1){setTimeout(function(){fadeIn(el,i);}, 10);}
}
function seto(el,i)
{
el.style.opacity = i;
}
starter();
M2------Does not work------ http://jsfiddle.net/TH2dn/13/
function starter(){
var i = 0;
var el = document.getElementById("div1");
fadeIn(el,i);
}
function fadeIn(el,i) {
for ( i = 0 ; i<=1 ; i = i + 0.01){
setTimeout( function(){ seto(el,i); } , i * 1000);}
}
function seto(el,i)
{
el.style.opacity = i;
}
starter();
While using JSHint in the JSFiddle on M2 it says that --" Don't make functions within a loop "
M3------Works Properly------ jsfiddle.net/TH2dn/9/
var i = 0;
var el = document.getElementById("div1");
function fadeIn() {
for ( i = 0 ; i<=1 ; i = i + 0.01){
setTimeout("seto(" + i + ")", i * 1000);
}
}
function seto(i)
{
el.style.opacity = i;
}
The abopve question is based on Pure JavaScript fade in function

it says that --" Don't make functions within a loop "
That's good advice, but it isn't your (main) problem here.
Your problem is that you are invoking every functions 1 second from right now. They will execute in a random order, starting in 1 second and firing as fast as they can.
Do this:
function fadeIn(el) {
var go = function(j) {
setTimeout( function(){ seto(el,j); } , j *1000);}
};
for (var i = 0 ; i<=1 ; i = i + 0.01) go(i);
}

Below is the complete answer to the question...
ANS2 --- DEMO
function fin(){
var i = 0;
var el = document.getElementById("div1");
fadeIn(el,i);
}
function fadeIn(el,i) {
var go = function(i) {
setTimeout( function(){ seto(el,i); } , i * 1000);
};
for ( i = 0 ; i<=1 ; i = i + 0.01) go(i);
}
function seto(el,i)
{
el.style.opacity = i;
}
Thanks to Malvolio

Stop watch java script without using Date.getTime()

As a java script beginner, I wanted to try my hand at writing stop watch code and I wrote the following:
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts a stopwatch:</p>
<p id="demo"></p>
<button id="start-stop" onclick="myTimerFunction()">Start time</button>
<button id="resetter" style="visibility:hidden" onclick="resetTimer()">Reset</button>
<script>
var timer = new Object();
timer.hours = 0;
timer.minutes = 0;
timer.seconds = 0;
timer.milliseconds = 0;
timer.add = add;
function add() {
timer.milliseconds+=10;
if(timer.milliseconds == 1000) {
timer.seconds++;
timer.milliseconds = 0;
}
if(timer.seconds == 60) {
timer.minutes++;
timer.seconds = 0;
}
if(timer.minutes == 60) {
timer.hours++;
timer.minutes = 0;
}
}
timer.display = display;
function display () {
var str = "";
if(timer.hours<10) {
str += "0";
}
str += timer.hours;
str += ":";
if(timer.minutes<10) {
str += "0";
}
str += timer.minutes;
str += ":";
if(timer.seconds<10) {
str += "0";
}
str += timer.seconds;
str += ":";
/*var x = timer.milliseconds/10;
if(x < 10) {
str += "0";
}*/
if(timer.milliseconds<10) {
str += "0";
}
if(timer.milliseconds<100) {
str += "0";
}
str += timer.milliseconds;
return str;
}
timer.reset = reset;
function reset() {
timer.hours = 0;
timer.minutes = 0;
timer.seconds = 0;
timer.milliseconds = 0;
}
var myVar;
function start() {
timer.add();
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = timer.display() + "\t" + t;
}
function stop() {
clearInterval(myVar);
}
function resetTimer() {
stop();
timer.reset();
document.getElementById("demo").innerHTML = timer.display();
document.getElementById("start-stop").innerHTML="Start time";
document.getElementById("resetter").style.visibility="hidden";
}
function myTimerFunction() {
var x = document.getElementById("start-stop");
if(x.innerHTML.match("Start time")) {
document.getElementById("resetter").style.visibility="visible";
myVar = setInterval(function(){start()},10);
x.innerHTML="Stop time";
}
else if(x.innerHTML.match("Stop time")) {
stop();
x.innerHTML="Start time";
}
}
</script>
</body>
</html>
But, the problem is when I put the delay in setInterval(func,delay) as 1 and doing corresponding changes, it is not giving reliable timing for seconds. It is slower than a normal clock. It gives 'kind of' reliable timing for delay >= 10.
I checked for stop watch js scripts online but all of them use some or other form of Date() and set "delay" as "50", which I do not understand why, as of now. There is an answer here in SO which doesn't use Date() but it also has the same problem as mine. I could not comment there as I do not have enough reputation so I am asking a question instead.
So, my question is: Is it impossible to achive normal clock reliability, if we don't use Date() function? Else if it is possible, please help me improve this piece of code or please provide some pointers.
Thanks.

Here's how you'd do it without getTime, which you really shouldn't...
var ms = 0;
var intervalID;
function start() {
var freq = 10; // ms
intervalID = setInterval(function () {
ms += 10;
var myDate = new Date(ms);
document.getElementById('watch').innerHTML = myDate.getUTCHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds() +
":" + myDate.getMilliseconds();
}, freq);
}
function stop() {
clearInterval(intervalID);
}
function reset() {
ms = 0;
myDate = new Date(ms);
document.getElementById('watch').innerHTML = myDate.getUTCHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds() +
":" + myDate.getMilliseconds();
}
Fiddle

As you've found out setInterval/setTimeout is not reliable. You must use a native time library to get a reliable time.
Since you can't keep the time in JavaScript the idea is that you poll the time, and poll it often so that it looks close enough.
If you naively do:
setInterval(function () {
console.log((new Date()).getTime();
}, 1000); // 1 second
you will see that it will skip seconds.
A better approach is something like:
var last = 0;
setInterval(function () {
var now = Math.floor((new Date()).getTime() / 1000); // now in seconds
if (now !== last) {
console.log(now);
last = now;
}
}, 10); // 10ms

If you want more information as too why JavaScript timers are unreliable, read this great article.
http://ejohn.org/blog/how-javascript-timers-work/

Simple animation change height without jquery

I need simple animation on simple js. I think jquery too much for that. I need to increase or decrease the height of the block by pressing the buttons, but this work only on Opera (.
Example
function global_animate(element, property_to_map, duration, callback) {
duration = duration || 1000;
var delta = function (a) { return a; };
var start = new Date().getTime();
var property_from_map = {};
var property_units_map = {};
for (var property in property_to_map) {
property_from_map[property] = window.getComputedStyle(element, null)[property] || element.currentStyle[property];
property_units_map[property] = parseUnits(property_from_map[property]);
property_from_map[property] = parseInt(property_from_map[property]);
property_to_map[property] = parseInt(property_to_map[property]);
}
function parseUnits(a) {
try {
return a.match(/^\d+(\w{2}|%);?$/i)[1];
} catch (e) {
return "";
}
}
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
for (var property in property_to_map) {
var result = (property_to_map[property] - property_from_map[property]) * delta(progress) + property_from_map[property];
element.style[property] = result.toFixed(2) + property_units_map[property];
}
if (progress < 1)
setTimeout(arguments.callee, 10);
else
if (typeof callback == 'function')
callback();
}, 10);
}

you need to change the regexp from
alert("23.2px".match(/^\d+(\w{2}|%);?$/i));​ // alert null
to something like this
alert("23.2px".match(/^\d+\.*\d*(\w{2}|%);?$/i));​ // alert ["23.2px", "px"]

I think the problem lies in your regex: a.match(/^\d+(\w{2}|%);?$/i)[1];. The second time it runs it does’t catch the units properly.
If I hard code the units to 'px', it works for me (in chrome): http://jsfiddle.net/9DCA5/5/
Maybe you can debug from there?

Method getComputedStyle() is not supported in IE, which uses the "currentStyle" property instead.

How to set timer in mootools

I am trying to make a slide show in mootools, and was trying delay function to make a periodic effect in slideshow but it was not working. So i am planning to make a timer function, but have no idea how to do that.
here is something which i have done..i little messy i guess
function slideImages(id_new, id_old){
console.log($(id_new));
$(id_old).tween('opacity', [1,0]);
$(id_old).setStyle('display','none');
$(id_old).tween('margin-left', -980);
$(id_new).setStyle('display', 'block');
$(id_new).tween('opacity', [0,1]);
$(id_new).tween('margin-left', 180);
var c = id_new;
var d = id_old;
//timer = setInterval ( "timerFunction()", 5000 );
(slide(c, d)).delay(5000); //this isn't working and browser is getting hanged
}
function slide(c, d){
console.log(c);
if (c.split('_')[1].toInt() > 2){
id_new = 'image_'+ 0 ;
console.log(id_new);
}
else{
id_new = 'image_'+ (c.split('_')[1].toInt()+1);
console.log(id_new);
}
id_old = c;
slideImages(id_new, id_old);
};

there are many ways to use delay or setTimeout. here they are:
function slideImages(id_new, id_old) {
var c = $(id_new);
var d = $(id_old);
d.tween('opacity', [1, 0]);
d.setStyle('display', 'none');
d.tween('margin-left', -980);
c.setStyle('display', 'block');
c.tween('opacity', [0, 1]);
c.tween('margin-left', 180);
// your timer becomes global here, careful. crappy pattern.
// use a closure so it goes in the upper scope, allowing you to stop.
// cancel by clearTimeout(timer)
// pass function to delay, scope = null, arguments
timer = slide.delay(5000, null, [c, d]);
// or
timer = (function() {
slide(c, d);
}).delay(5000);
// or normal js
timer = setTimeout(function() {
slide(c, d);
}, 5000);
}
function slide(c, d) {
if (c.split('_')[1].toInt() > 2) {
id_new = 'image_' + 0;
console.log(id_new);
}
else {
id_new = 'image_' + (c.split('_')[1].toInt() + 1);
console.log(id_new);
}
id_old = c;
slideImages(id_new, id_old);
}

i've adapted this mootools diver scroller. at the moment you have to click the buttons to move left to right. I was wondering if any one could help me put a automated scroll in?
Check with this Link...
Also refer this code...
heres the js code
var totalImages = 3;
var currentImage = 1;
function workSlide(way) {
var currentAmount=$("holder2").getStyle("margin-left");
var myFx = new Fx.Tween('holder2',{duration: 600});
if(way == "right") {
if (currentImage <= totalImages-1) {
currentImage++;
var whichAmount = -(((currentImage-1)) * 920);
myFx.start('margin-left',currentAmount,whichAmount);
}
} else {
if (currentImage > 1) {
currentImage--;
var whichAmount = -(((currentImage-1)) * 920);
myFx.start('margin-left',currentAmount,whichAmount);
}
}
}