Develop Reference

How to create a screensaver in javascript

I want to create a screensaver in JavaScript but I don't know how can I set the time between the images,.
I have an Ajax call and I see if the time is, for example, 2s or 90s, but I don't know how to set that time between images, this is my code:
var cont = 0;
var time = 1000
setInterval(function() {
console.log(tiempo);
if(cont == imagenes.length){
return cont = 0;
}else{
var imagen = imagenes[cont].imagen;
$('#imgZona').attr('src', imagen);
var time = imagenes[cont].tiempoVisible;
finalTime = Number(time);
}
cont++;
}, Number(finalTime ));
but the time between images is always the same, 1000, how can I change it for the time that I receive in the Ajax call? Which is imagenes[cont].tiempoVisible

I cannot comment as I don't have enough reputation, but take a look at this fiddle
https://jsfiddle.net/kidino/4mbpR/
var mousetimeout;
var screensaver_active = false;
var idletime = 5;
function show_screensaver(){
$('#screensaver').fadeIn();
screensaver_active = true;
screensaver_animation();
}
function stop_screensaver(){
$('#screensaver').fadeOut();
screensaver_active = false;
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
$(document).mousemove(function(){
clearTimeout(mousetimeout);
if (screensaver_active) {
stop_screensaver();
}
mousetimeout = setTimeout(function(){
show_screensaver();
}, 1000 * idletime); // 5 secs
});
function screensaver_animation(){
if (screensaver_active) {
$('#screensaver').animate(
{backgroundColor: getRandomColor()},
400,
screensaver_animation);
}
}
It will change background-color on idle mouse for 5 seconds, you can replace the code to change image, instead of background color.

Control set every timeout on each iteration.
var cont = 0;
var time = 1000
function next () {
console.log(tiempo);
if(cont == imagenes.length){
cont = 0;
}
var imagen = imagenes[cont].imagen;
$('#imgZona').attr('src', imagen);
cont++;
setTimeout(next, Number(imagenes[cont].tiempoVisible));
}
setTimeout(next, Number(initialTime));
Also I fixed a frindge condition.

Twojs blinking circle

I am working on a graph editor. I need to highlight a circle, and make that circle in the screen center and the set the zoom scale to 2. If the circle is already higlighted, to set it switch it and set as a normal circle. My need is a least to make the circle blink before to switch it off.
I dont see how to make the circle blink. could someone who knows about "two.js" how to do it. I know that it is in the function two.update();
// Render loop
var temps = 0;
two.bind('update', function(){
if (selectedNodes.length > 0){
if (temps > 0) {
temps -= 0.02;
for(var i = 0; i < selectedNodes.length; i++){
selectedNodes[i].circle.fill = 'yellow';
selectedNodes[i].circle.scale = 1.3;
selectedNodes[i].circle.stroke = "red";
selectedNodes[i].circle.linewidth = 2;
}
} else {
for(var i = 0; i < selectedNodes.length; i++){
selectedNodes[i].circle.fill = '#FF8000';
selectedNodes[i].circle.scale = 1;
selectedNodes[i].circle.noStroke();
}
}
}
});
and to trigger the blink
function Blink(){
temps = 1;
}
is it the best way to have this blink (even if it blinks only one time)
here is a JsFiddle
https://jsfiddle.net/hichem147/uf0b82ry/
To use it : Click on [(+) Node], then create some nodes, then click on [Select] and click on a circle, and click on [Blink] button.

Finally, I used setTimeout and setInterval
function MakeCircleBlink(){
var count = 5;
if (count > 0) {
var x = setInterval(function(){
count--;
console.log(count);
if (count ===0) {clearInterval(x);}
blink();
}, 1000);
}
}
function blink(n){
n--;
circle1.stroke = 'red';
circle1.linewidth = 4;
circle1.scale = 1.0;
setTimeout(function(){ circle1.noStroke(); circle1.scale = 1;}, 500);
}
and here is a codepen showing how it works : https://codepen.io/hichem147/pen/jvjKzP?editors=0010

javascript rotator / no jQuery

I am working on a slider to rotate/fade Divs without using jQuery.
This is what I got so far: http://jsfiddle.net/AlexHuber/V2Avd/24/
It rotates once through the array of 4 Divs, continues to the first Div and then stops.
Any ideas? Thanks, Alex
var box=document.getElementById("box");
var index=box.children.length-1;
var active;
var next;
box.children[0].style.zIndex="1";
box.children[1].style.zIndex="1";
box.children[2].style.zIndex="1";
box.children[3].style.zIndex="1";
var timer1 = setInterval(function(){
active = box.children[index];
next = (index > 0) ? box.children[index-1] : box.children[box.children.length-1];
active.style.zIndex = "3";
next.style.zIndex = "2";
var opa = 1.0;
var timer2 = setInterval(function(){
if (opa <= 0){
active.style.zIndex="1";
active.style.opacity="1.0";
next.style.zIndex="3";
clearInterval(timer2);
}
else {
active.style.opacity = opa;
opa -= 0.1;
}
}, 50);
index -= 1;
if (index < 0)
index = box.children.lenght-1;
}, 2000);

On your second from last line change .lenght-1 to .length-1
that makes the divs rotate indefinitely. I'm assuming that's what you want.

Loop is more important than rest?

I want to execute simple code when user click on my button:
First: change my cursor to 'wait'
Next: execute loop
When loop is finished: change cursor back to 'default'
I wrote this code:
HTML:
<button type="button" id="gogogo">Go!</button>
<div id="progress">0</div>
JS:
var progress = document.getElementById('progress');
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
for(var ii = 0; ii < 30000; ii += 1){
progress.textContent = ii;
}
document.body.style.cursor = 'default';
});
Live code here: http://jsfiddle.net/4Bz27/2/
And something is wrong. Loop execute first, and after that happen cursor changing.
Is it possible or any way related to asynchronous?

You are performing a blocking operation. This will certainly cause slow script warnings at some point. You can solve this by making the loop asynchronous:
var progress = document.getElementById('progress');
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
var index = 0,
updater;
updater = function() {
progress.textContent = index++;
if (index < 30000) {
setTimeout(updater, 50);
} else {
document.body.style.cursor = 'default';
}
};
updater();
});

Your styles are applied only after the call stack has finished. You can separate this into two different call stacks by running the second half of the function from a setInterval like this:
var progress = document.getElementById('progress');
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
setTimeout(function(){
for(var ii = 0; ii < 30000; ii += 1){
progress.textContent = ii;
}
document.body.style.cursor = 'default';
}, 0);
});

RequestAnimationFrame Way
jsFiddle here
(function (W) {
W.onload = function () {
var D = W.document,
a = 0,
c = D.getElementById('progress');
function b() {
c.innerText = a + 1;
a++;
if (a < 500) {
requestAnimationFrame(b);
} else {
D.body.style.cursor = 'default';
}
}
function start() {
D.body.style.cursor = 'wait';
b()
}
D.getElementById('gogogo').onclick = start;
}
})(window)
This way you use less resources and so your complex link modification does not slow down other open websites.

Your Loop is happening too fast for any result to be shown.
Everything is done but in about < 1ms.
You could use timeouts to delay what's being shown so that you can see what's happening.
Edit: here is the JsFiddle Link:
http://jsfiddle.net/4Bz27/9/
var progress = document.getElementById('progress');
var restoreCursor= function () {
document.body.style.cursor = 'default';
}
document.getElementById('gogogo').onclick = (function(){
document.body.style.cursor = 'wait';
var ii = 0;
// this is a immediately executed function
//that calls itself with a small timeout
(function goLoop(){
progress.textContent = ii;
if(ii<30000){
ii++;
setTimeout(goLoop,10);
}else {
restoreCursor();
}
})();
});
replace your jsFiddle by that and you're good to go.
personnally for better performance i would iterate over each frame.
like this:
var ii =0;
(function goLoop(){
progress.textContent = ii;
if(ii>3000) {
ii++;
requestAnimationFrame(goLoop);
})();

Setting a time for flicker animation on img

I'm using this code to make my logo flicker on my website. But It becomes annoying when it continues to flicker while browsing, how can I set a time to allow it to flicker for something like the first 15seconds on page load, then stops?
JS code I'm using:
$(document).ready(
function(){
var t;
const fparam = 100;
const uparam = 100;
window.flickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","hidden");
t = setTimeout('window.unflickr()',uparam);
}
else
t = setTimeout('window.flickr()',fparam);
}
window.unflickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","visible");
t = setTimeout('window.flickr()',fparam);
}
else
t = setTimeout('window.unflickr()',uparam);
}
t = setTimeout('window.flickr()',fparam);
});

You could have a counter, which you then use to decide whether you want to set another timeout. As a side note, you should never add functions to window and then passing a string to setTimeout. Always just pass the function itself:
$(document).ready(function(){
var t;
var amount = 0;
const fparam = 100;
const uparam = 100;
function timeout(f, t) { // this function delegates setTimeout
if(amount++ < 150) { // and checks the amount already (un)flickered
setTimeout(f, t); // (150 * 100 ms = 15 s)
}
}
var flickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","hidden");
t = timeout(unflickr,uparam);
}
else
t = timeout(flickr,fparam);
};
var unflickr = function(){
if(Math.round(Math.random())){
$("#logodcoi").css("visibility","visible");
t = timeout(flickr,fparam);
}
else
t = timeout(unflickr,uparam);
};
t = timeout(flickr,fparam);
});

I see you're using jquery, you could use the following, if I remember correctly, all the stuff I use below has been in jquery since 1.0, so you should be good:
counter = 1;
function hideOrShow(){
$(".classToSelect").animate({"opacity": "toggle"}, 100);
counter = counter +1;
if (counter >= 21) clearInterval(flickerInterval);
}
flickerInterval = setInterval(hideOrShow, 100);
Change the selector, animation duration, and variable names to whatever you fancy/need.