ClearInterval() won't stop my rotate function - javascript

I'm using the jQuery Rotate plugin, to animate the rotation of an image 90 degrees, and then stop the rotation.
My problem is that it won't stop rotating, even after calling clearInterval();
$(document).ready(function() {
var finalAngle;
var intval = setInterval(function func()
{
$("#myimg").rotate(1);
if(typeof func.angle == 'undefined' )
{
func.angle = 0;
}
func.angle += 1;
finalAngle = func.angle;
}, 1);
if(finalAngle == 90)
{
clearInterval(intval);
}
});
Basically all I'm doing is (statically) counting the angles, and once it hits 90, call the clearInterval function. I had to introduce another variable to store the count so that I could access it outside the setInterval function.

It's easy. setInterval is called then the condition with finalAngle is evaluated and after one milisecond your rotating function is called. Therefore clearInterval is never called when finalAngle is 90.
This code should work for you:
$(document).ready(function() {
var intval = setInterval(function func()
{
$("#myimg").rotate(1);
if(typeof func.angle == 'undefined' )
{
func.angle = 0;
}
func.angle += 1;
if (func.angle == 90)
{
clearInterval(intval);
}
}, 1);
});

The if statement is executed once. Try this?
$(document).ready(function() {
var finalAngle;
var intval = setInterval(function func()
{
$("#myimg").rotate(1);
if(typeof func.angle == 'undefined' )
{
func.angle = 0;
}
func.angle += 1;
finalAngle = func.angle;
if(finalAngle == 90)
{
clearInterval(intval);
}
}, 1);
});
Though I don't see why you can't just get away with...
$(document).ready(function() {
var finalAngle=0;
var intval = setInterval(function func()
{
$("#myimg").rotate(1);
finalAngle++;
if(finalAngle == 90)
{
clearInterval(intval);
}
}, 1);
});

Related

Setting interval only once by an event listener, but run other functions every time

See this code:
function handleTouchStart(event) {
event.preventDefault();
cnvs.removeEventListener("touchstart", handleTouchStart);
var x1 = event.touches[0].clientX-cnvs.offsetLeft;
callerOfCNVSTouchStart = setInterval(function () {
if (x1 > cnvs.width/2 && whiteShip.x2 < cnvs.width) {
whiteShip.x1+= 3;
} else if (x1 < cnvs.width/2 && whiteShip.x1 > 0) {
whiteShip.x1-= 3;
}
}, 20);
nBMC = setInterval(makeNewBullets,200);
setInterval(sendEnemies,2000);//I want to run this line only once
}
I want the other functions to run every time the event occurs, but set the interval for sendEnemies only once. How can I do that?
Use a variable like var sentEnemies = false; outside function handleTouchStart and update it in the function to true the first time and use if(!sentEnemies) for the line to execute only once.
var sentEnemies = false;
function handleTouchStart(event) {
event.preventDefault();
cnvs.removeEventListener("touchstart", handleTouchStart);
var x1 = event.touches[0].clientX-cnvs.offsetLeft;
callerOfCNVSTouchStart = setInterval(function () {
if (x1 > cnvs.width/2 && whiteShip.x2 < cnvs.width) {
whiteShip.x1+= 3;
} else if (x1 < cnvs.width/2 && whiteShip.x1 > 0) {
whiteShip.x1-= 3;
}
}, 20);
nBMC = setInterval(makeNewBullets,200);
if (!sentEnemies) {
setInterval(sendEnemies,2000); // Will execute only once
sentEnemies = true;
}
}

how to trigger the increment only once

I have used the setTimeout function so my object stays on y<0 for a while and at that time i want to my increment to trigger only once but it keeps on triggering ...more i delay my function using the setTimeout function higher times the increment operation gets trigger......so what is the solution through which my increment triggers only once no matter how long my object stays in y<0
Player.prototype.checkInWater = function () {
if (this.y < 0) {
++scoreGot
setTimeout(function(){
player.x = 202;
nplayer.y = 405;
}, 300);
}
};
Player = function(){
....
this.checkedInWater = false;
}
Player.prototype.checkInWater = function () {
if (this.y < 0 && !this.checkedInWater) {
++scoreGot;
t = this;
t.checkedInWater = true;
setTimeout(function(){
player.x = 202;
nplayer.y = 405;
t.checkedInWater = false;
}, 300);
}
};

JS How make that function could not be start earlier than 10 seconds after the previous launch?

function testworking(n){
if(n == 1)
testuser();
else
testconfig();
}
setInterval(function(){testworking(n)}, 1000);
How do I make that function testuser(); could not start earlier than 10 seconds after the previous launch?
P.S.:
an approximate algorithm:
if(n == 1){
if (first run function `testuser()` ||
time after previous run `testuser();` == 10 seound){
testuser();
}
}
Set a flag using a timer:
var is_waiting = false;
function testuser() {
if (!is_waiting) {
//do your stuff here
} else {
alert('You must wait ten seconds before doing this again');
}
is_waiting = true;
setTimeout(function() {is_waiting = false}, 10000);
}
You can do it like this
var i = 0;
function testworking(i){
if(i < 10) {
console.log(i);
} else {
console.log('Here is 10 second');
}
}
setInterval(function(){
i = (i == 10) ? 0 : i;
i++;
testworking(i);
}, 1000);
It's not entirely clear what you're looking for, but here's something that might give you an idea.
var n = 1;
var testUserInterval;
function testworking(n) {
if (n == 1)
testuser();
else
testconfig();
}
function testuser() {
var cnt = 0;
if (testUserInterval == null) {
testUserInterval = setInterval(function() {
document.getElementById("testusercnt").innerHTML = cnt;
cnt += 1;
if (cnt == 10) {
clearInterval(testUserInterval);
testUserInterval = null;
//DO SOMETHING ???
testuser();
}
}, 1000);
}
}
function testconfig() {
document.getElementById("testconfig").innerHTML = n;
}
setInterval(function() {
testworking(n++)
}, 1000);
testuser cnt:<span id="testusercnt"> </span>
<br/>testconfig n: <span id="testconfig"> </span>

loop start quicker

I would like this function to begin quicker once it ends. Thanks.
demo: http://jsfiddle.net/RuX5d/5/
Here is an actual timing I am currently using: http://jsfiddle.net/RuX5d/51/
$(document).ready(function() {
var i = 1, dir = 1, curFx = 'fadeIn';
var interval = setInterval(function () {
if (i == 6 && $('#slide1').is(':visible')) {
$('#slide1').fadeOut(2000);
return;
}
$('#slide'+ i)[curFx](500);
i = i + 1*dir;
if (i == 10 || i == -1) {
dir = (dir == 1)?-1:1;
curFx = (curFx == 'fadeIn')?'fadeOut':'fadeIn';
}
}, 1000);
});
Change the 500 at the end. It is the number of milliseconds between each executions of the script. Here's a demo: http://jsfiddle.net/RuX5d/49/

JavaScript to delay execution of functions after page is loaded

I wrote this javascript to make an animation. It is working fine in the home page. I wrote a alert message in the last.
If I go other then home page, this alert message has to come, but I am getting alert message, if I remove the function, alert message working on all pages, any thing wrong in my code?
window.onload = function(){
var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
var signUp = document.getElementById('signup-link');
if (yellows != 'undefined' && signUp != undefined){
function animeYellowBar(num){
setTimeout(function(){
yellows[num].style.left = "0";
if(num == yellows.length-1){
setTimeout(function(){
signUp.style.webkitTransform = "scale(1)";
},num*250);
}
}, num * 500);
}
for (var i = 0; i < yellows.length; i++){
animeYellowBar(i);
}
}
alert('hi');
}
DEMO: http://jsbin.com/enaqu5/2
var yellows,signUp;
window.onload = function() {
yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');
signUp = document.getElementById('signup-link');
if (yellows !== undefined && signUp !== undefined) {
for (var i = 0; i < yellows.length; i++) {
animeYellowBar(i);
}
}
alert('hi')
}
function animeYellowBar(num) {
setTimeout(function() {
yellows[num].style.left = "0";
if (num == yellows.length - 1) {
setTimeout(function() {
signUp.style.webkitTransform = "scale(1)";
},
num * 250);
}
},
num * 500);
}
DEMO 2: http://jsbin.com/utixi4 (just for sake)
$(function() {
$("#magazine-brief h2").each(function(i,item) {
$(this).delay(i+'00').animate({'marginLeft': 0 }, 500 ,function(){
if ( i === ( $('#magazine-brief h2').length - 1 ) )
$('#signup-link')[0].style.webkitTransform = "rotate(-2deg)";
});
});
});
For starters you are not clearing your SetTimeout and what are you truly after here? You have 2 anonymous methods that one triggers after half a second and the other triggers a quarter of a second later.
So this is just 2 delayed function calls with horribly broken syntax.
Edited Two possibilities, one fixes your current code... the latter shows you how to do it using JQuery which I would recomend:
var yellows, signUp;
window.onload = function(){
yellows = document.getElementById('magazine-brief');
if(yellows != null){
yellows = yellows.getElementsByTagName('h2');
}else{
yellows = null;
}
signUp = document.getElementById('signup-link');
if (yellows != null && signUp != null && yellows.length > 0)
{
for(var i = 0; i < yellows.length; i++)
{
animeYellowBar(i);
}
}
alert('hi');
}
function animeYellowBar(num)
{
setTimeout(function(){
yellows[num].style.left = "0";
if(num == yellows.length-1){
setTimeout(function(){
signUp.style.webkitTransform = "scale(1)";
},num*250);
}
}, num * 500);
}
The below approach is a SUMMARY of how to use JQuery, if you want to use JQuery I'll actually test it out:
//Or using JQuery
//Onload equivelent
$(function(){
var iterCount = 0,
maxIter = $("#magazine-brief").filter("h2").length;
$("#magazine-brief").filter("h2").each(function(){
setTimeout(function(){
$(this).css({left: 0});
if(iterCount == (maxIter-1))
{
setTimeout(function(){
signUp.style.webkitTransform = "scale(1)";
},iterCount*250);
}
}, iterCount++ * num );
});
});

Categories