Sleep for a while onclick of a button - javascript

Currently i have the following
$(document).ready(function () {
$('#abc').click(function () {
setTimeout(function () {
//do stuff
}, 2000);
});
});
Is there a better way to do it, perhaps something like this
$('#abc').click(function () {
// sleep/delay or whatever
//do stuff
});

No, there is no better way. In order to sleep synchronously you need to use a spinlock which will use all the browser's resources and spike the CPU for 2 seconds (the duration of the "sleep").
Stick with the asynchronous version.

$('#abc').click(function () {
$(this).delay(seconds);
//do stuff
});
Try this
I dunno wheather it works

Related

Unsure on why .load() complete event isn't working

I'm unsure on why this isn't working:
$(document).ready(function() {
setInterval(RefreshDiv, 2000);
})
function RefreshDiv(){
$('#box').load('messages.php #box', function() {
$('#box').on('load', function() {
$('#box').scroll(0, 50);
});
});
}
The tags are correct and the .load() part works every two seconds but I don't understand why my complete event to scroll down 50px isn't working?
I've also tried another method to scroll:
var log = document.querySelector('#box');
log.scrollTop = log.scrollHeight - log.clientHeight;
but this also doesn't execute on load
Edit #1
jQuery($ => {
setInterval(RefreshDiv, 2000);
})
function RefreshDiv() {
$('#box').load('messages.php #box', () => {
$('#box').scrollTop(50);
});
}
The load event only fires on certain elements such as img and the window object. As such I presume #box is not one of them.
You don't actually need the load event handler anyway as the callback itself runs when the load() method completes its request. Try this:
jQuery($ => {
setInterval(RefreshDiv, 2000);
})
function RefreshDiv() {
$('#box').load('messages.php #box', () => {
$('#box').scrollTop(5000);
});
}
It's also worth noting that sending AJAX requests every 2 seconds is not ideal, as it will not scale as you have more concurrent visitors to your site, and can lead to server performance problems. There's likely to be a much better alternative, depending on what it is you're doing.

jQuery fade in and fade out loop issue

I am making a results screen which toggles between showing the user their best time/score and their latest time/score. I found a solution using this site but after leaving the website open for a few hours I saw that the timings had gone out of sync. I know that this is hard to test so I thought I would see if any experts on here could help me to optimize or fix my code.
CODEPEN
JSFIDDLE
JS
$(document).ready(function() {
setInterval( function() { resultsTransition(); }, 4000);
function resultsTransition() {
$('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
$('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
}
});
I think your design could be improved (and the out-of-sync problem solved) by simply toggling the opacity of the elements in your resultsTransition method instead of starting a new sequence, which could interfere unpredictably with the interval.
Something like:
var latestTransitionElementVisible = true; //the initial state of your elements
setInterval(resultsTransition, 4000); //note you can just pass the function name
function resultsTransition() {
$('.latest-transition').fadeTo(500, latestTransitionElementVisible ? 0 : 1);
$('.best-transition').fadeTo(500, latestTransitionElementVisible ? 1 : 0);
latestTransitionElementVisible = !latestTransitionElementVisible ;
}
I guess whatever problem/issue you are facing is because of varying animation times .Try the following:
$(document).ready(function() {
setTimeout( function() { resultsTransition(); }, 4000);
function resultsTransition() {
if(!$('.latest-transition').is(':animated') && !$('.best-transition').is(':animated'))
{
$('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
$('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
setTimeout( function() { resultsTransition(); }, 4000);
}
}
});

Load javascript after 5 seconds after page has loaded?

I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.

setTimeout/pausing/ etc

I've tried a few different ways except the right one.
Trying this:
setTimeout( function() {
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
});
}).eq(0).trigger('showText');
}, 4000);
Will wait for 4 seconds, then fade each paragraph in, one after another at the speed of .800 miliseconds.
What I want to do is fade a paragraph in at .800 ms, then wait for 4 seconds before the next paragraph fades in.
The basic set-up of:
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
alert('pause here');
});
}).eq(0).trigger('showText');
works but I've yet to hit the right syntax to make it pause where the alert is.
I tried throwing a call to a function but I don't need to run anything except just to wait.
So in pseudo code, I'm trying to define something like:
function wait() {
pause(for 4 seconds);
}
Then I could just call that function instead of the alert above. My issues with setTimeout has been 'having' to define a function but I'm over thinking something.
Using setTimeout was correct, but you applied it in the wrong place.
$('.historyTextBoxes p').bind('showText',function(e) {
$(this).fadeIn(800,function(){
// this is the callback after the fadein
// here we want to wait (use a timeout)
var next = $(this).next();
if (next.length)
setTimeout(function() {
// before the next text is shown
next.trigger("showText");
}, 4000);
})
}).eq(0).trigger('showText');
This should do it:
function showAll() {
var p = $('.historyTextBoxes p').get(); // array of elements
(function loop() {
if (p.length) {
var el = p.shift();
$(el).fadeIn(800).delay(4000).promise().done(loop);
}
})();
}
demo at http://jsfiddle.net/4dNr3/2/
Note that this uses no explicit timers at all, and nor does it use any events to trigger the next phase - it relies on the animation queue for all timing. Note that it's not generally a good idea to mix timers and animation unless you can guarantee that they're interleaved rather than running in parallel. In this case that's OK, though.

Jquery delay not working

Can someone please tell me why my function is not executing, after my images are displayed?
$("#screen").css("background-image", "url('screens/animated/077.gif')").delay(5000).queue(function() {
$("#screen").css("background-image", "url('screens/animated/078.gif')").delay(5000).queue(function() {
buttonClick(16);
});
});
Don't know why it won't call my buttonClick(16); function.
You could just animate instead dude? animate() you can pass a time to and also it has a callback function, so once the first animation is complete you can run more code, i.e.
$(this).animate(function(){
//Do animation
},1000,function(){
//Animation is complete, do something else like the next animation
$(this).animate(function(){
//Another animation to run once the first is complete
});
});
Because you didn't dequeue.
$("#screen").css("background-image", "url('screens/animated/077.gif')").delay(5000).queue(function () {
$(this).css("background-image", "url('screens/animated/078.gif')").delay(5000).queue(function () {
$(this).dequeue();
buttonClick(16);
}).dequeue();
});
The queue function receives a param that you should call when the next function should run.
Example:
$().queue(function (next) {
// Do what you need
next();
});

Categories