We Keep Coding

ClearInterval is not defined - jQuery

To blur the keyboard on mobile devices, I use an interval with count on the showPicker() function.
showPicker = function () {
var timesRun = 0;
var intervalblur = setInterval(function () {
timesRun += 1;
if (timesRun === 60) {
clearInterval(intervalblur);
}
console.log('fire blur');
editorInstance.blur();
}, 600);
};
When the picker is closed, I want to clear the interval. I did on this function:
hidePicker = function () {
clearInterval(intervalblur);
}
But I am getting this error:
Uncaught ReferenceError: intervalblur is not defined
Any ideas? Thank you

Because it's not defined in a global scope but in showPicker function's scope.
You have 3 options
Define it globally
var intervalblur;
showPicker = function () {
var timesRun = 0;
intervalblur = setInterval(function () {
timesRun += 1;
if (timesRun === 60) {
clearInterval(intervalblur);
}
console.log('fire blur');
editorInstance.blur();
}, 600);
};
clearInterval(intervalblur);
Define it on window
showPicker = function () {
var timesRun = 0;
window.intervalblur = setInterval(function () {
timesRun += 1;
if (timesRun === 60) {
clearInterval(intervalblur);
}
console.log('fire blur');
editorInstance.blur();
}, 600);
};
clearInterval(intervalblur);
showPicker will return the intervalId
showPicker = function () {
var timesRun = 0;
var intervalblur = setInterval(function () {
timesRun += 1;
if (timesRun === 60) {
clearInterval(intervalblur);
}
console.log('fire blur');
editorInstance.blur();
}, 600);
return intervalblur;
};
var intervalId = showPicker();
clearInterval(intervalId);
Personally I'd prefer option 3 because I don't like global variables.

How to kill and restart the recursive function in javascript

I am working on knockout js.
In that i have a recursive function which executes a function every minute. for that am using a timer every 60 sec it will execute also same will be reflecting in the UI also.
In my case, if i try to assign or initialize a timer value(observable) which is inside a loop, it doesn't reflecting instead of reflecting it is added to the pipeline and that much time loop is running simultaneously.
In that case i want to kill the loop and again want to restart every time i am changing the timer value.
timerInSec=60;
var loop = function () {
if (this.timer() < 1) {
myFunction()
this.timer(this.timerInSec - 1);
setTimeout(loop, 1000);
} else {
this.timer(this.timer() - 1);
setTimeout(loop, 1000);
}
};
loop();

Here is my solution. Please check.
timerInSec = 60;
const Loop = (function () {
let timer = 0;
let timerId = -1;
const myFunction = function () {
console.log('finished');
}
const fnLog = function (tm) {
console.log('current time = ', tm);
}
const fnProc = function () {
timerId = setTimeout(myFunction, 1000 * timer);
}
return {
start: function (tm = 60) {
this.stop();
timer = tm;
fnProc();
},
stop: function () {
if (timerId !== -1) {
clearTimeout(timerId);
timerId = -1;
}
}
}
})();
Loop.start(timerInSec);
setTimeout(() => {
Loop.start(timerInSec);
}, 500);

FlipClock.js : ease-in to initial value

I'm a PHP developer and I want to make FlipClock's inital value ease-in. I think it can be done by:
Making clock.incerement()'s interval value flexible, Based on how close is current value, to initial value.
Make a break when the current value was equal to initial value.
I changed this code:
var clock;
var initial = 5000;
$(document).ready(function() {
clock = new FlipClock($('.clock'), 0, {
clockFace: 'Counter',
});
setTimeout(function() {
setInterval(function() {
if(clock.getTime().time >= initial) {
clock.stop();
} else {
clock.increment();
}
}, 100);
});
});
to this one:
var clock;
var initial = 5000;
$(document).ready(function() {
clock = new FlipClock($('.clock'), 0, {
clockFace: 'Counter',
});
setTimeout(function() {
setInterval(function() {
if(clock.getTime().time >= initial) {
clock.stop();
} else {
clock.increment();
}
}, function() {
if ((initial - clock.getTime().time) > 1000) {
return 1;
} else if ((initial - clock.getTime().time) > 100) {
return 10;
} else {
return 1000;
}
});
});
});
But did not worked. What i have to do?!
Thank you.

The interval value is supposed to a time in milliseconds, not a function.
One other way to do it is that you calculate the timeout value is as such
setTimeout(function(){
var x = CalculateCurrentInterval(clock);
setInterval(function() {
if(clock.getTime().time >= initial) {
clock.stop();
} else {
clock.increment();
}
}, x);
})
var CalculateCurrentInverval = function(clock) {
if ((initial - clock.getTime().time) > 1000) {
return 1;
} else if ((initial - clock.getTime().time) > 100) {
return 10;
} else {
return 1000;
}
}
I have not tried it but it should work.
Problem is that you are sending in a function where a number is expected

I want to repeat code but don't know how t use loops

I have this code:
js:
function change_color(color) {
$("body").animate({ backgroundColor:color }, '1000');
}
setTimeout(function () {
change_color('#4AC900'
);
}, 500);
setTimeout(function () {
change_color('#964514'
);
}, 1500);
setTimeout(function () {
change_color('#EE0000'
);
}, 1500);
setTimeout(function () {
change_color('#FFE303'
);
}, 1500);
setTimeout(function () {
change_color('#8E388E'
);
}, 1500);
setTimeout(function () {
change_color('#FF00AA'
);
}, 1500);
and I want to use it repeatedly but putting it in a while loop just crashes the site can anyone help?
Here is the site... its my little brothers site not mine... http://timothy.techbytbone.com/isaac.php

var colors = ['#4AC900', '#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA'],
len = colors.length,
i;
for (i = 0; i < len; i++) {
(function(i, color) {
setTimeout(function () {
change_color(color);
}, (i + 1) * 500);
})(i, colors[i]);
}

this is all you need:
jsFiddle demo
var c = 0;
var colors = ['#4AC900','#964514','#EE0000','#FFE303','#8E388E','#FF00AA'];
(function loop(){
$('body').stop().animate({backgroundColor : colors[c++%colors.length] }, 1000, loop);
})();
(Prest attention that you need to use the jQuery UI to animate the CSS background-color property)

var colors = {'#4AC900': 500,
'#964514': 1500,
// etc. Just continue with the color-millisecond combinations
}
for(key in colors) {
setTimeout(function () {
change_color(key);
}, colors[key]);
}

Your loop is crashing because you can't set all the necessary timeouts at browser's loading. Here is a version of your code that should work.
var colors = ['#4AC900', '#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA'];
var currentColorIndex = 0;
var scheduleChange;
scheduleChange = function() {
change_color(currentColorIndex);
currentColorIndex = (currentColorIndex + 1) % colors.length
setTimeout(scheduleChange, 1000);
};
setTimeout(scheduleChange, 500);

function change_color(color) {
$("body").animate({ backgroundColor:color }, '1000');
}
setTimeout(function() {
change_color('#4AC900')
}, 500);
colors = ['#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA']
interval = setInterval(function() {
if (! a.length) {
return clearInterval(interval);
}
change_colors(a.shift());
}, 1500);
Have Fun. You should learn about closures for not messing setIntervals. There are tons of libraries that animate colors and other stuff. I can recommend morpheus by ded.

Why doesn't this simple JavaScript increment and decrement method work?

(function() {
var count = {
digit: 0,
increment: function() {
var interval = setInterval(function() {
if (++count.digit == 10) {
clearInterval(interval);
count.decrement();
}
var update = document.getElementById("liveUpdate");
update.innerHTML = count.digit;
}, 500);
},
decrement: function() {
var interval = setInterval(function() {
if (--count.digit == -1) {
clearInterval(interval);
}
}, 500);
}
};
count.increment();
})();
It stops but it doesn't go down? What could be the problem?

Your decrement function never updates the output anywhere. The variable is going down but you don't show that on screen.
Try (or check the corresponding JSFiddle):
(function() {
var update = document.getElementById("liveUpdate");
var count = {
digit: 0,
increment: function() {
var interval = setInterval(function() {
if (++count.digit == 10) {
clearInterval(interval);
count.decrement();
}
update.innerHTML = count.digit;
}, 500);
},
decrement: function() {
var interval = setInterval(function() {
if (--count.digit == -1) {
clearInterval(interval);
}
update.innerHTML = count.digit;
}, 500);
}
};
count.increment();
})();

setInterval will call the function every 500 seconds. It will not stop until you stop it. You can read more about stopping it at Stop setInterval call in JavaScript

It't not a bug, it's a feature ;-). setInterval() runs the given function in a loop with a given interval (500 ms). See this article for details.