2 functions same time jQuery slideUp -slideDown + resize - javascript

What's the best solution to run those functions at the same time?
Mainly: slideDown and fancybox.resize, as it's now run on function complete, function fancybox.resize has to be run while slidedown is running, otherwise it won't work.
function DisplayLogin() {
jQuery("#sign-up-select").slideUp(400);
jQuery("#login-select").slideDown(400, function(){
jQuery.fancybox.resize()
});
}
Thanks!!
Adam
Thanks for help guys!!
That's what I wanted to get - final result:
function DisplayLogin() {
jQuery("#sign-up-select").slideUp(400);
jQuery("#login-select").slideDown(400);
var interval = setInterval(function(){jQuery.fancybox.resize()}, 100);
setTimeout(function() {
clearInterval(interval);
}, 400);
}

Run another function while other is 'running' using setInterval.
function DisplayLogin() {
jQuery("#sign-up-select").slideUp(400);
jQuery("#login-select").slideDown(400);
var interval = setInterval(function(){jQuery.fancybox.resize()}, 100);
setTimeout(function() {
clearInterval(interval);
}, 400);
}

Related

clear timeout after trigger click

If class triggered run another function only once and clear Timeout. I am using Firefox.
Expecting
var i = setInterval(function() {
if $('[style*="display: inline;"]').click();
function start timeout() {
document.querySelector('.body_inside_inside_once_').click()
clearTimeout();
}, 200);
}, 1000);
Your questions is not clear ,and contains syntax error but for rough idea...The following code might help you to clearTimeout upon clicking a HTML element.
var i = setInterval(function() {
function start timeout() {
// Operation
}}, 1000);
document.querySelector('.body_inside_inside_once_').click(function(){
clearInterval(i);
});

How to call a function a fixed number of times after fixed intervals in javascript

I want to call an on event function a fixed number of times and after fixed interval of time.
Example of the code which is not working
function work(i){
remove();
draw(i);
}
d3.select("body").select('button').on('click', function() {
for(var i=0;i<7;i++){
setTimeout(function(i){
remove();
draw(i);
},1500);
}
});
What is the problem with my code and please provide the solution.
All your setTimeout calls are made immediately after each other in the loop and do not wait for each other to complete. You can use setInterval to achieve the functionality you requrie:
function work(i) {
remove();
draw(i);
}
d3.select("body").select('button').on('click', function () {
work(0);
var times = 1,
myInterval = setInterval(function () {
work(times);
times++;
if (times === 7) {
clearInterval(myInterval);
}
}, 1500);
});
Try this simple soln using setTimeout
function work(i){
remove();
draw(i);
if(i<=7){//set your condition
setTimeout(function(i){
i++;
work(i);
},1500);
}
}
d3.select("body").select('button').on('click', function() {
work(0);
});
I think, using setTimeout is safer than setInterval

Jquery setTimeout inside a setTimeinterval not working

I have a setinterval that moves bulldozer from the right to the left.
In the jsfiddle below, the setInterval must stop itself after 5 seconds. (used a settimeout and clearinterval for that) but it's not working. Can anyone help me?
http://jsfiddle.net/B5MKj/11/
var gameover;
gameover = setInterval(function () {
setTimeout(function () {
clearInterval(movingbulldozer);
}, 55000);
}, 10);
You had a typo in your fiddle, updated fiddle, if works just fine, but instead of 5000 ms you had 55000ms set for the timeout.
setTimeout(function () {
clearInterval(movingbulldozer);
}, 5000);
In your example, movingbulldozer is undefined. If you're trying to clear the interval, clear the interval with the right reference. In your example, this would be clearInterval(gameover);
The problem with your example is that every 10 ms you're adding a timeout to the DOM which clears the interval.
var timeout, interval, date,
i = 0;
$(document).ready(function() {
interval = setInterval(function() {
date = new Date();
i++;
$('#debug').html('Interval parsed at '+date.getTime()+', interval #'+i);
if (i >= 100) { // According to your example
$('#debug').html('Starting timeout...');
timeout = setTimeout(function() {
$('#debug').html('Timed out');
}, 5000);
clearInterval(interval);
}
}, 10);
});
Check out my example, see if it helps. :)
http://jsfiddle.net/faqq5/

Anonymous function in setTimeout not working

I'm trying to create a delay between two loops of the nivo-slider.
Without the setTimeout everything works just fine (but without delay). So the folloing example works:
$('#slider').nivoSlider({
lastSlide: function(){
$('#slider').data('nivo:vars').stop = true;
// setTimeout(function() {
$('#slider').data('nivo:vars').stop = false;
// }, 2000);
},
});
If I uncomment the setTimeout-lines the slider stops but does not start again? Any ideas why?
Update:
http://jsfiddle.net/kgYNX/
2nd update:
Tried it with a wrapping function, too. The function gets called but if I use setTimeout in the new function it stops working: http://jsfiddle.net/kgYNX/1/
Solved it slightly different:
beforeChange: function(){
$('#slider').data('nivo:vars').stop = true;
var delay = 0;
if ($('#slider').data('nivo:vars').currentSlide == $('#slider').data('nivo:vars').totalSlides - 2) {
delay = 2000;
}
setTimeout(function() {
$('#slider').data('nivo:vars').stop = false;
}, delay);
}
I don't know why "totalSlides - 2", but it works: http://jsfiddle.net/kgYNX/15/
As a variant, you may add custom option to slider vars collection to prevent stop execution on lastSlide handler when slider re-enabled by timeout:
lastSlide: function () {
var dontStop = $('#slider').data('nivo:vars').dontStopOnLast;
if (!dontStop) {
$('#slider').data("nivoslider").stop();
setTimeout(function () {
$('#slider').data("nivoslider").start();
}, 2000);
}
$('#slider').data('nivo:vars').dontStopOnLast = !dontStop;
}

loop javascript function?

Can anyone please tell me how i can add an infinite loop or a constant repeat on this piece of JavaScript I have?
<script>
$(".modcontentnewestmore").hide();
$('.morebutton').click(function () {
if ($('.modcontentnewestmore').is(":hidden")) {
$(".modcontentnewest").fadeTo(500, 0);
$('.modcontentnewestmore').fadeTo(0, 500);
} else {
$('.modcontentnewestmore').fadeTo(500, 0);
$('.modcontentnewest').fadeTo(0, 500);
}
});
</script>
I think what you should use here is setInterval. Otherwise your loop will block any other javascript you'd want to run.
JavaScript Timing Events
<script>
function doSomething{
$(".modcontentnewestmore").hide();
$('.morebutton').click(function () {
if ($('.modcontentnewestmore').is(":hidden")) {
$(".modcontentnewest").fadeTo(500, 0);
$('.modcontentnewestmore').fadeTo(0, 500);
} else {
$('.modcontentnewestmore').fadeTo(500, 0);
$('.modcontentnewest').fadeTo(0, 500);
}
});
}
setInterval(doSomething, 30); //it will loop the function doSomething every 30 ms
</script>
If you want to keep replaying some JavaScript, rather than looping use an interval or timer.
var interval = window.setInterval(function() {
console.log('hi');
}, 1000);
Infinite loop? just use following code.
while(true) {
//do something here
}

Categories