Develop Reference

Page Freezes with move.js animation loop

The goal of this is to have this script run until a certain condition is met. In this case the condition would be that say a widget on the site has completed sending an Ajax request and received and processed a response.
Issue is that the page freezes up whenever the function load() is run.
var animateWrap = u(document.getElementsByClassName("process_transaction_wrapper"));
var i = 0;
function load(){
animateWrap.append("<div class='loader'></div>");
// Create Loading Object
move(".loader")
.set("width", "25px")
.set("height", "25px")
.y(75)
.set("background-color", "#ccc")
.end();
while(i < 1) {
move(".loader")
.y(0)
.rotate("180")
.duration("2s")
.end(function(){
move(".loader")
.y(75)
.rotate("360")
.duration("2s")
.end();
});
}
}
function endLoad(){
i++;
}

You are executing move() very repetitively at an extreme pace inside that loop. That is going to cause a freeze. You want to run a recursive timeout or a simple interval, preferably after your .duration(2s) ends.
var animateWrap = u(document.getElementsByClassName("process_transaction_wrapper"));
var timer = null; //initialize a timer variable to hold timeout
function load() {
animateWrap.append("<div class='loader'></div>");
// Create Loading Object
move(".loader")
.set("width", "25px")
.set("height", "25px")
.y(75)
.set("background-color", "#ccc")
.end();
callMovement(); //start movement OR call this in the end() function of the initial loading object
keepMoving(); //start continuous movement
}
function keepMoving() {
//assign a timeout to the timer
timer = setTimeout(function () {
callMovement();
keepMoving(); //call same function again after 2000ms. You could probably call this inside .end() on this animation library of yours to preserve accuracy.
}, 2000);
}
function callMovement() {
move(".loader")
.y(0)
.rotate("180")
.duration("2s")
.end(function () {
move(".loader")
.y(75)
.rotate("360")
.duration("2s")
.end();
});
}
function endLoad() {
clearTimeout(timer); //call this to stop recursion
}
Wait are you creating a loading spinner? You can easily make this on css and toggle movement and displays by simple class manipulation. It is miles easier than manually doing such a small task in JS

delay for not running other lines of code

in this code i want to when div with .ch1 class changed background to answer_box_small_orange.png other bottom js lines code don't run and no ajax request sends until 3 seconds and i used
window.setTimeout(function () {}, 3000)
but it doesnt work correctly
here first of all i request and get data and it is ok
$.ajax({
type:'post',
url:'http://207.154.251.233:8039/app.php/question/get',
data:JSON.stringify({apikey:'jwebdpqodp9fgkwjebfkdpqihdqlwkndqp'}),
success:(function (response) {
var x = response;
$("#question").text(x.result.question);
$(".op1").text(x.result.options["1"]);
})
});
i inserted ajax code and some other codes in function because i want to run it every 60 seconds
function myInterval () {
$(".ch1").css('background-image','url(image/answer_box_small.png)');
var clock;
$(document).ready(function() {
clock = new FlipClock($('.clock'), 60, {
clockFace: 'Counter',
autoStart: true,
countdown: true,
callbacks: {
stop: function() {
$('#loading').fadeIn('5000');
$.ajax({
type:'post',
url:'http://79.175.166.98/',
data:JSON.stringify({apikey:'jwebdpqodp9fgkwjebfkdpqihdqlwkndqp'}),
success:(function (response) {
$('#loading').fadeOut('slow');
var x = response;
$("#question").text(x.result.question);
$(".op1").text(x.result.options["1"]);
var answer = x.result.answer;
if(answer == 1){
$(".ch1").css('background-image','url(image/answer_box_small_orange.png)');
}
window.setTimeout(function () {}, 3000);
})
});
}
}
});
});
}
myInterval();
window.setInterval(function(){
myInterval();
}, 60000);

Based on what you told me, my interpretation is that you have a setTimeout() function and a setInterval() function. The setTimeout() runs at the beginning and will wait for 3 seconds. Then call an ajax function to create new requests every 6 seconds. Your problem seems to be that your first setTimeout() is re-run after you create your first AJAX request, but you want it to stop.
Taken from W3
setTimeout Return Value: A Number, representing the ID value of the timer that is set. Use this value with the clearTimeout() method to cancel the timer.
Knowing this, we can essentially cancel a setTimout() function. In your case, the first setTimeout().
Consider this,
var firstIntervalID = setTimeout(function() {
$.ajax() {
// First AJAX ran after three seconds.
}
}, 3000);
clearTimeout(firstIntervalID);
// Your code resumes to set an interval every 60 seconds without having to worry about the three seconds set before
myInterval();
var secondIntervalID = setInterval(function(){
myInterval();
}, 60000);
Essentially, you cancel the setTimeout() when you don't need it anymore. Your application for it can be different than what I wrote, but the main idea is the same. Cancel/Clear the setTimeout() with the ID that is returned on setTimeout() with clearTimeout().

Redirect with inactivity

My objective is to keep a user in a view as long as he/she keeps clicking a button within a certain lapse.
I'm using Rails and was exploring a solution via an embedded JS in the pertinent view.
So far I'm able to set a time after which the user will be redirected to root path with the following script:
var delayedRedirect = function (){
window.location = "/";
}
var delay = 10000;
$(document).ready(function() {
setTimeout('delayedRedirect()', delay);
});
I've been trying to write a function that resets the value of 'delay'or that calls the setTimeoutFunction again.
$('#btn-persist').click(function() {
delay = 3000;
// or calling again setTimeout('delayedRedirect()', delay);
});
But I noticed that changing the variable won't affect the setTimeout function that has already been called.
I've also tried to use the clearTimeout function as below without success
var delayedRedirect = function (){
window.location = "/persists";
}
var delay = 3000;
var triggerRedirect = function() { setTimeout('delayedRedirect()', delay);
}
var stopRedirect = function (){
clearTimeout(triggerRedirect);
}
$(document).ready(function() {
triggerRedirect();
$('#btn-persist').click(function() {
stopRedirect();
});
});
I wonder why this may not be working and if there's any other way to stop the execution of the setTimeout function that has already been called so I can call it again to effectively reset the time to the original value of 'delay'.
At the same time, I don't want to stop any other JS functions that are running in parallel.
Do you see a better solution to achieve this?

The main problem why clearTimeout is not working. because you are clearing a anonymous function instead of a setTimeout variable
change this
var triggerRedirect = function() { setTimeout('delayedRedirect()', delay);
}
to this
var triggerRedirect = setTimeout('delayedRedirect()', delay);
Edit:
also change this (if you want to restart the inactive redirect trigger)
$('#btn-persist').click(function() {
stopRedirect();
});
to this
$('#btn-persist').click(function() {
stopRedirect();
triggerRedirect();
});

AngularJS: reset $timeout for each page switch

I'm working on my first AngularJS project and I'm working on a timeout that redirects the user to the startpage after a few minutes if they haven't clicked on anything. timeout is called on each page load to restart the timeout.
But the my problem is that restart() is called multiple times. One time for each page/view load. I use ngRoute.
For example if has clicked on three pages, timeout() has now been called three times and when the $timeout reaches the time, restart() is called three times.
myapp.controller(..., [...], function(...) {
function restart() {
$location.path("/slide/1");
}
function timeout() {
var timeoutHandle = $timeout(function() {
$timeout.cancel(timeoutHandle);
restart();
}, timeoutTime);
}
timeout();
}

Try to use this code:
var redirectTimeout;
var redirect = function() {
$location.path("/slide/1");
}
$timeout.cancel(redirectTimeout);
redirectTimeout = $timeout(function() {
var timeoutTime = 5000 // five seconds
redirectTimeout = $timeout(redirect, timeoutTime);
});
Here is the JSFiddle

Wouldn't it be better to put this kind of functionality inside a factory?

Run part of function once, but run rest of function every 5 seconds

I have a function that checks the status of connection to server. I want to run checkOnline every 5 seconds. If the connection is lost, and it keeps failing then the fadeIn for error message keeps running as well (creates a flashing effect). How can I change it so that the fade functions are only run once, when it fails, but still keeps checking the connection.
$(function () {
var url = 'https://examplesite.com/';
function checkOnline() {
$.get(url).done(function () {
window.location = url;
}).fail(function () {
$('.errortext').hide().fadeIn(500);
$('.loadingtext').fadeOut(500);
});
};
window.setInterval(function () { checkOnline(); }, 5000);
setTimeout(function () { checkOnline(); }, 2000);
});

Keep track of whether the fade effects already ran. Then check it before running the fade. Here's an example that uses a variable called fadeFlag:
var fadeFlag = false;
function fadeOnce() {
// Has fade happened already?
if (fadeFlag === false) {
// No. Then do the effects
$('.errortext').hide().fadeIn(500);
$('.loadingtext').fadeOut();
fadeFlag = true;
}
}
function checkOnline() {
$.get(url).done(function () {
window.location = url;
}).fail(function () {
// Try the fade effects
fadeOnce();
});
};
The first time fadeOnce() is called, it runs the effects and then sets fadeFlag to true. The next time, it sees that fadeFlag is true, so it does nothing.