So, this is the code I'm using to set my interval which triggers draw() every 0.1s
var intervalTime = 100;
setInterval(draw, intervalTime);
function draw() {
if( i == 1 ) intervalTime = 50;
}
I want to know how I can change that intervalTime to 50 when i becomes 1. The code above doesn't seem to work like that. It stays at an interval time of 0.1s
var intervalTime = 100;
var interval = setInterval(draw, intervalTime);
function draw() {
if( i == 1 ) {
clearInterval(interval);
interval = setInterval(draw, intervalTime);
}
}
Related
I need to make it so that the event here removes the element after it fades out but how would I do that? I got it so that the element fades out from a grid that I am using but I want it to be removed completely as well.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
You just need to .remove() it, but you'd want the interval to go for 50 more ms so that there's time for the element to be visible at 0.1 opacity, else it might look a bit off:
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (!op){
clearInterval(timer);
event.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
see this article
you can use
elementID.parentNode.removeChild(elementID);
You are catching the event here. Thats means you can get the target. You can use ev.target.remove() to remove it. Hope its work for you.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
event.target.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
I have 4 elements spread horizontally and I want to move them left every 3 sec, the thing that the 1st element and the 4th element are the same, so when we are at the 4th element I am changing back to the 1st without animation so the slides loop itself.
What happened is that the 1st/4th slide pauses twice the time.
I am looking for a way to solve it, I tried to change the "pause" var during the interval through the "if" but that seems impossible.
I tried to setTimeout inside the interval but they both work parallel
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);}
than this
var $post = $('.testi');
var x = -100;
var pause = 1500;
setIntervalX(function () {
$post.css('transform', 'translateX(' + x + '%)');
if ( x == -400 ){
$('.testi').css('transition', '0s');
$('.testi').css('transform', 'translateX(0)');
x = -100;
}
else {
setTimeout(function(){
$('.testi').css('transition', '1.5s ease');
x = x - 100;
}, 1500);
}
}, pause, 100);
When x reaches -400, you need to bring it back to -100 immediately, without an timeout cycle.
Try this:
var $post = $('.testi');
var x = -100;
var pause = 1500;
setIntervalX(function () {
if ( x == -400 ){
$('.testi').css('transition', '0s');
$('.testi').css('transform', 'translateX(0)');
x = -100;
}
$post.css('transform', 'translateX(' + x + '%)');
setTimeout(function(){
$('.testi').css('transition', '1.5s ease');
x = x - 100;
}, 1500);
}, pause, 100);
Thank you #Jonathan Halpern you make me think about that in a different way so I managed to solve it just made some changes
var $post = $('.testi');
var x = -100;
var pause = 4000;
setIntervalX(function () {
if (x == -400){
$post.css('transition', '0s ease');
$post.css('transform', 'translateX(0)');
x = -100;
};
setTimeout(function(){
$('.testi').css('transition', '1s ease');
$post.css('transform', 'translateX(' + x + '%)');
x = x - 100;
}, 150)
}, pause, 100);
//change the speed at which the animations are moving
function spd()
{
var stuff = document.getElementById("speed");
//if start is enabled
//change speed
if ((document.getElementById("stop").disabled == false) && (turbochecker == 0))
{
speed = 50;
interval = setInterval(function(){next(currani);}, speed);
turbochecker = 1;
}
else
{
speed = 250;
interval = setInterval(function(){next(currani);}, speed);
}
}
setting interval the second time keeps increasing the speed by 50. Anyway to make the speed reset back to 250 rather than keep increasing for every 50?
When you want to change the interval frequency, you should clear it first, then set it again:
clearInterval(interval)
interval = setInterval(function(){next(currani);}, speed);
The code I wrote, I made it in order for a certain div to fade in when my window.pageYOffset is more than 400 and it works weird. To begin with, it fades in but it flashes until the opacity is set to 1.0 and I don't know how to fix it. Please help me I don't know which is my mistake. Here is the code:
var navBarVisibility = function () {
if (window.pageYOffset > 400) {
var movies = document.getElementById("movies");
var opacity = 0.1;
var apparence = function () {
if (opacity <= 1.0) {
movies.style.opacity = opacity;
} else {
clearInterval(timer2);
clearInterval(timer);
}
opacity += 0.1;
}
var timer = window.setInterval(apparence, 70);
}
}
var timer2 = window.setInterval(navBarVisibility, 1);
Thank you very much.
It acts that way because you do not check if the code has already run, so it keeps firing the same event over and over when you are past 400.
You need to cancel timer2 when the offset is past 400.
Refer to this fiddle - http://jsfiddle.net/rnqLfz14/28/
[ This code is not mine - http://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing ]
//....
function stop() {
running = false;
started = false;
cancelAnimationFrame(frameID);
}
//...
function mainLoop(timestamp) {
// Throttle the frame rate.
if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
frameID = requestAnimationFrame(mainLoop);
return;
}
delta += timestamp - lastFrameTimeMs;
lastFrameTimeMs = timestamp;
begin(timestamp, delta);
if (timestamp > lastFpsUpdate + 1000) {
fps = 0.25 * framesThisSecond + 0.75 * fps;
lastFpsUpdate = timestamp;
framesThisSecond = 0;
}
framesThisSecond++;
var numUpdateSteps = 0;
while (delta >= timestep) {
update(timestep);
delta -= timestep;
if (++numUpdateSteps >= 240) {
panic();
break;
}
}
draw(delta / timestep);
T.textContent = timestamp;
if (timestamp >= 6000.0) {
T.textContent = "Stopped!";
stop();
}
end(fps);
frameID = requestAnimationFrame(mainLoop);
}
//...
The cancelAnimationFrame function is not stopping the animating loop. Got any suggestions? I have scratched my head over it for a long time now please any suggestions would be appreciated.
When the condition for stop() is fulfilled, stop() is called but the code continues so a new rAF will be requested.
Just add a return after the stop call to prevent this from happening (or use an else):
...
if (timestamp >= 6000.0) {
T.textContent = "Stopped!";
stop(); // stop() is just a sub-routine here and will continue after being called
return; // <--- here
}
...
Modified fiddle