Detect end of animation of last element in each() - javascript

I have an animation of SVG paths and I would like to eg. addClass after last of element in paths is done with animation. I tried to add a callback for animate() but it doesnt work, it started when the first loop ended. then I tried .when(startAnimeDude()).then(doStuff()) but also it started at the beginning. Last thing what I tried is i == i.length -1 and also it started at the beginning( while the animation is still going). What I am missing ?
Thanks for reading.
DEMO: http://jsfiddle.net/18yunbhk/
JS
var anim = function () {
$.extend(jQuery.easing, {
easeInOutQuad: function (x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
});
var animeDude = function (parent, min, max, delayAnim) {
var paths = $('svg').find('path');
$.each(paths, function (i) {
var totalLength = this.getTotalLength();
$(this).css({
'stroke-dashoffset': totalLength,
'stroke-dasharray': totalLength + ' ' + totalLength
});
$(this).delay(delayAnim * i).animate({
'stroke-dashoffset': 0
}, {
duration: Math.floor(Math.random() * max) + min,
easing: 'easeInOutQuad'
});
if (i == 12) { //12 is last element
console.log('sad');
}
});
};
var startAnimeDude = function (parent) {
animeDude(parent, 0, 1000, 40);
};
startAnimeDude($('svg'));
};
anim();

Something like
if (i === (paths.length - 1)) {
console.log("sad");
}
JSFIDDLE
If you want the condition to be checked only when the animation is complete, then you can write that piece of code in the callback function for animation.
$(this).delay(delayAnim * i).animate({
'stroke-dashoffset': 0
}, {
duration: Math.floor(Math.random() * max) + min,
easing: 'easeInOutQuad',
complete: function() {
if (i === (paths.length - 1)) { //12 is last element
console.log('sad');
}
}
});

Related

How to return a random number in javascript which is always greater then the previous number

How can I return a random number in javascript which is always greater then the previous random number every time the code reruns. For example when the code runs first time it returns 1000 and then when it runs second time it returns 1300.
Conditions: The number must always be an integer.
function randomFunction() {
var x = 0
return function() {
x = x + Math.round( Math.random() * 100 )
return x
}
}
var nextRandom = randomFunction()
nextRandom() // => 51
nextRandom() // => 127
nextRandom() // => 203
How about this?
function myRnd(prev, max) {
return prev + Math.floor(Math.random() * max) + 1;
}
var last;
last = myRnd(1000, 500);
last = myRnd(last, 500);
EDIT
Being inspired by #dimakura's outstanding answer, here is my closure-based function which accepts start value and next max random step:
function myRndFunc(baseValue) {
return function(max) {
baseValue += Math.floor(Math.random() * max) + 1;
return baseValue;
};
}
var myRnd = myRndFunc(1000);
myRnd(300);
myRnd(500);
How about simply adding the previous number?
Try this :
for (i = 0; i < n; i++) {
newR = Math.floor((Math.random() * 1000) + oldR);
// use newR here.
oldR = newR;
}
Conbine Math.random() with Math.floor() setting the minimum end of your range to the last result.
var min = 0;
var max = 10000;
$("#randomise").click(function() {
var result = Math.floor(Math.random() * (max - min)) + min;
$("#result").text(result);
min = result;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<button id="randomise">Randomise</button>

Generate incremented random numbers between 0 to 100 every second where new number should be greater than the previous nymber

I need a javascript where with every second call i get a random number between 0-100 where current number should be greater than previous number. I wrote a code to get random numbers every second but stuck at generating it with increment.
<script>
var span = document.getElementsByTagName("span")[3];
var i = 100;
(function randNumber() {
var a = Math.floor((Math.random() * i) + 1);
span.innerHTML = "RandNumber: " + a;
setTimeout( randNumber, 1000);
})();
Note : The numbers should generate randomly.
example result may be : 2,5,7,8,22,23,34,56,78,88.....
You should not create a new random number between zero and your maximum (i), but just between the last created number (lastNumber) and max (i).
Also you might want to stop, when the random numbers reached the maximum.
var span = document.getElementsByTagName("span")[3],
i = 100,
lastNumber = 0;
function randNumber() {
lastNumber = lastNumber + Math.floor( Math.random() * (i - lastNumber) + 1 );
span.innerHTML = lastNumber;
if( lastNumber < i ) {
setTimeout( randNumber, 1000 );
}
}
randNumber();
AS for the comments and the requirement of a minimum amount of steps until reaching the maximum:
In each iteration, just increase you number by a random value between 1 and ((max - min) / steps. It is pretty much the same code as above.
var span = document.getElementsByTagName("span")[3],
max = 100,
min = 0,
lastNumber = 0,
minSteps = 30;
// how wide can the average step be at most?
var stepWidth = (max - min) / minSteps;
function randNumber() {
lastNumber = lastNumber + Math.floor( Math.random() * stepWidth + 1 );
span.innerHTML = lastNumber;
if( lastNumber < max ) {
setTimeout( randNumber, 1000 );
}
}
randNumber();
If you extract the "between two numbers" logic into its own function like this, this becomes a lot easier. This way, you just generate a number between your last generated number and your maximum.
var max = 100
var last_number = 1
var interval_id = setInterval(function(){
last_number = get_random_number_greater_between(last_number, max)
span.innerHTML = "RandNumber: " + last_number;
if(last_number >= max){
window.clearInterval(interval_id)
}
}, 1000)
function get_random_number_greater_between(low, high){
return Math.floor(Math.random() * (high - low + 1) + low);
}
Try this:
// generate a random number from 0 to max - 1.
function rand(max) {
return Math.floor(max * Math.random());
}
// generate a random number from min to max.
function range(min, max) {
return min + rand(1 + max - min);
}
// the loop function
function next(n, callback) {
var m = range(n, 100);
if (m < 100) setTimeout(next, 1000, m + 1, callback);
callback(m);
}
var span = document.getElementById("rand");
next(0, function (m) {
span.innerHTML = "Random number: " + m;
});
<span id="rand"></span>

Access global variables in setInterval()

I have a function to generate some random-ish numbers and inside that function I make a call to setInterval() because I need those numbers to refresh every 2 seconds.
function genSine(val1, val2) {
var freq = 0.1; // angular frequency
var coords = function(x, y) {
var amplitude = Math.floor((Math.random()*10)+1);
var phase = Math.floor((Math.random()*20)+1);
return {
x : Math.sin(freq * (val1 + phase) * amplitude) + Math.floor((Math.random()*100)+1),
y : Math.sin(freq * (val2 + phase) * amplitude) + Math.floor((Math.random()*100)+1)
};
}
setInterval(function() {
current = coords(50, 50);
console.log('Val 1: ' + current.x);
console.log('Val 2: ' + current.y);
}, 2000);
}
genSine(10, 20);
This is all well and good, the values update as expected but my goal is to have two global variables (let's call them val1/val2) update within that setInterval() function. It appears I have a scoping issue because those variables are not accessible within the function and I can not access the 'current' variable from outside that function. I know I am missing something here, what is it?
Fiddle: http://jsfiddle.net/niczak/4uNen/1/
You just need to define var current = {}; in the global scope, and be sure not to define var current in any other scope. current=[whatever]; is fine, as long as there's no var.
Edit: I'm not sure what you did, but I fixed your fiddle with this code:
var current;
function genSine(val1, val2) {
var freq = 0.1; // angular frequency
var coords = function(x, y) {
var amplitude = Math.floor((Math.random()*10)+10);
var phase = Math.floor((Math.random()*20)+10);
return {
x : Math.sin(freq * (val1 + phase) * amplitude) + Math.floor((Math.random()*100)+1),
y : Math.sin(freq * (val2 + phase) * amplitude) + Math.floor((Math.random()*100)+1)
};
}
setInterval(function() {
current = coords(50, 50);
console.log(current);
$(".display").html(JSON.stringify(current));
}, 500);
}
genSine(10, 20);
setInterval(function() {
$(".display2").html("d2:"+JSON.stringify(current));
}, 200);
Your current is fine in that scope, it is your coords function that is not in the right scope. Put that in the global scope together with the freq variable:
var freq = 0.1; // angular frequency
var coords = function (x, y) {
var amplitude = Math.floor((Math.random() * 10) + 1);
var phase = Math.floor((Math.random() * 20) + 1);
return {
x: Math.sin(freq * (val1 + phase) * amplitude) + Math.floor((Math.random() * 100) + 1),
y: Math.sin(freq * (val2 + phase) * amplitude) + Math.floor((Math.random() * 100) + 1)
};
}
function genSine(val1, val2) {
setInterval(function () {
current = coords(50, 50);
console.log('Val 1: ' + current.x);
console.log('Val 2: ' + current.y);
}, 2000);
}
genSine(10, 20);
in typescript i did following code. in the below code i assign _this with the value of this
export class HomeComponent implements OnInit {
lat: number = 22.008515;
setMarker(){
console.log('Inside setMarker Lat : '+this.lat); // 22.008515
var _this = this;
setInterval(function() {
console.log('Inside setInterval this.lat : '+this.lat); // undefined
console.log('Inside setInterval _this.lat : '+_this.lat); // 22.008515
}, 8000)
}
}

How to generate random duration value of second argument ( duration) in setInterval function

How to generate random duration value of second argument ( duration) in setInterval function.
//such as
var timerId = setInterval( timer_counter,getRandomInt(5,60),number,slatt);
var n = 10, // max value
r = Math.floor(Math.random() * n) + 1; // random number (1-10)
setInterval(function(){
timer_counter();
}, r * 1000); // to milliseconds
You're looking for Math.random() I believe (coupled with Math.floor).
Note: If r is (for example) 3, it will execute every 3 seconds for the life of that interval. If you want it to change, you need to use a setTimeout and change the timeout on every call. So to do that:
function worker(){
// the code that should be executed
}
function repeat(){
var n = 10; // every 1-10 seconds
setTimeout(function(){
worker();
repeat();
}, (Math.floor(Math.random() * n) + 1) * 1000);
}();
And to give you that getRandomInt function:
function getRandomInt(nMax, nMin){
nMax = nMax || 10;
nMin = nMin || 0;
return Math.floor(Math.random() * (nMax - nMin + 1)) + nMin;
}

Implementing jQuery's shake effect with animate

I've been given a cut down subset of the jQuery lib one of the key features I'm missing is the .effect functions. I do however have .animate. I was wondering if anyone would have any ideas how I could go about reproducing the animation functions.
I am particularly consious of making this only a few lines as I need to keep the code size down. Which is why the jquery lib is as small as it is and doesnt have the effects functions.
TLDR - I'm trying to replace
$("#"+id_string).effect( "shake", {}, "fast" );
With something using .animate within jQuery.
So far I have something like this ..
jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
this.each(function() {
$(this).css("position","relative");
for (var x=1; x<=intShakes; x++) {
$(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
.animate({left:intDistance}, ((intDuration/intShakes)/2))
.animate({left:0}, (((intDuration/intShakes)/4)));
}
});
return this;
};
I like #phpslightly solution so much, I keep using it. So here it is updated to basic jquery plugin form which will return your element
jQuery.fn.shake = function(interval,distance,times){
interval = typeof interval == "undefined" ? 100 : interval;
distance = typeof distance == "undefined" ? 10 : distance;
times = typeof times == "undefined" ? 3 : times;
var jTarget = $(this);
jTarget.css('position','relative');
for(var iter=0;iter<(times+1);iter++){
jTarget.animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
}
return jTarget.animate({ left: 0},interval);
}
You would then use it like a regular plugin:
$("#your-element").shake(100,10,3);
Or use the default values (100, 10, 3):
$("#your-element").shake();
It's actually already implemented this way under the covers, you can see exactly how in jquery.effects.shake.js, if you wanted to copy only that functionality you can.
Another approach to think about: if you're using multiple effects, I'd recommend downloading jQuery UI with only the effects you want. For this effect, without copying the functionality yourself, you would just need jquery.effects.core.js and jquery.effects.shake.js.
This is probably irrelevant now but I've ported jQ UI's shake effect as a standalone jQuery plugin. All you need is jQuery and it will work exactly like the one provided in jQ UI.
For those who want to use the effect without actually bloating their project with unnecessary jQ UI core files.
$('#element').shake({...});
It can be found here with instruction: https://github.com/ninty9notout/jquery-shake
Thought I'd leave this here for future reference.
This is a more clean and smooth way to do the animation.
jQuery.fn.shake = function(shakes, distance, duration) {
if(shakes > 0) {
this.each(function() {
var $el = $(this);
var left = $el.css('left');
$el.animate({left: "-=" + distance}, duration, function(){
$el.animate({left: "+=" + distance * 2}, duration, function() {
$el.animate({left: left}, duration, function() {
$el.shake(shakes-1, distance, duration); });});
});
});
}
return this;
};
I don't understand all the complexity being thrown into reproducing the shake effect with solely animate. Here's my solution in just a couple lines.
function shake(div,interval=100,distance=10,times=4){
$(div).css('position','relative');
for(var iter=0;iter<(times+1);iter++){
$(div).animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
}//for
$(div).animate({ left: 0},interval);
}//shake
EDIT: Updated code to return element to original position. Still believe this is the lightest and best solution to the problem.
I wrote some time ago a few simple jquery animations:
https://github.com/yckart/jquery-custom-animations
/**
* #param {number} times - The number of shakes
* #param {number} duration - The speed amount
* #param {string} easing - The easing method
* #param {function} complete - A callback function
*/
jQuery.fn.shake =
jQuery.fn.wiggle = function (times, duration, easing, complete) {
var self = this;
if (times > 0) {
this.animate({
marginLeft: times-- % 2 === 0 ? -15 : 15
}, duration, easing, function () {
self.wiggle(times, duration, easing, complete);
});
} else {
this.animate({
marginLeft: 0
}, duration, easing, function () {
if (jQuery.isFunction(complete)) {
complete();
}
});
}
return this;
};
This is not perfect, but functional
// Example: $('#<% =ButtonTest.ClientID %>').myshake(3, 120, 3, false);
jQuery.fn.myshake = function (steps, duration, amount, vertical) {
var s = steps || 3;
var d = duration || 120;
var a = amount || 3;
var v = vertical || false;
this.css('position', 'relative');
var cur = parseInt(this.css(v ? "top" : "left"), 10);
if (isNaN(cur))
cur = 0;
var ds = d / s;
if (v) {
for (i = 0; i < s; i++)
this.animate({ "top": cur + a + "px" }, ds).animate({ "top": cur - a + "px" }, ds);
this.animate({ "top": cur }, 20);
}
else {
for (i = 0; i < s; i++)
this.animate({ "left": cur + a }, ds).animate({ "left": cur - a + "px" }, ds);
this.animate({ "left": cur }, 20);
}
return this;
}
Based on #el producer solution, I added some multiply logic and make it look like a random shake.
jQuery.fn.shake = function (interval, distance, times) {
interval = typeof interval == "undefined" ? 100 : interval;
distance = typeof distance == "undefined" ? 10 : distance;
times = typeof times == "undefined" ? 3 : times;
var jTarget = $(this);
jTarget.css('position', 'relative');
for (var iter = 0; iter < (times + 1) ; iter++) {
jTarget.animate({ top: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)), left: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)) }, interval);
}
return jTarget.animate({ top: 0 , left: 0 }, interval);
}
Position had to be absolute on my side, so I changed it to:
jQuery.fn.shake = function(interval, distance, times) {
interval = typeof interval == "undefined" ? 100 : interval;
distance = typeof distance == "undefined" ? 10 : distance;
times = typeof times == "undefined" ? 3 : times;
var jTarget = $(this);
for (var iter=0;iter<(times+1);iter++) {
jTarget.animate({ 'padding-left': ((iter%2==0 ? distance : distance*-1))}, interval);
}
return jTarget.animate({ 'padding-left': 0 } ,interval);
}

Categories