I have an element that I want to have appear on my page after the user has been there for a few seconds. To achieve this, I used a sleep function and put it inside $(document).ready(). The idea is that the page will load and then the sleep will start. However what I'm seeing is that the sleep function is actually delaying the page load. Any idea what's wrong?
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {
}
}
$(document).ready(function(){
if ( $( ".email_tab" ).length ) {
sleep(8000);
$(".email_tab").toggleClass("email_tab_hide").toggleClass("email_tab_appear");
}
});
The sleep function consumes your browser cpus and freezes it.
What you want is:
$(document).ready(function(){
if ( $( ".email_tab" ).length ) {
setTimeout(function() {
$(".email_tab").toggleClass("email_tab_hide").toggleClass("email_tab_appear");
}, 8000);
}
});
Your problem may be that when the document is ready, and email_tab length is zero, the setTimeout won't run.
In JS you should use setTimeout(); instead custom sleep() function
setTimeout(function(){
$(".email_tab").toggleClass("email_tab_hide").toggleClass("email_tab_appear");
}, 8000)
The $(document).ready callback actually runs before the page is fully loaded. It just ensures that the whole DOM is available for manipulating. Your sleep busy-loop then delays the rest of the loading process. You should use setTimeout instead.
Related
I am trying to create a pop-up that automatically appears after a delay. is this possible through javascript? if so how would I implement this into my code?
Here is a link to the code I am working on https://jsfiddle.net/hk2808/7cs4xdmg/
function openPopup() {
window.location.hash = 'openModal';
}
window.onload = openPopup;
You can use setTimeout. I would make a more generic function that runs on onload and simply call openPopup from there.
Try this:
function openPopup() {
window.location.hash = 'openModal';
}
function onPageLoad() {
setTimeout(() => {
openPopup()
}, 3000)
}
window.onload = onPageLoad;
The popup will load 3 seconds after the onload for example.
setTimeout will do what you are looking to do
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
No, there isn't a way to delay the window onload. You could try to add a lot of images and other things that take a long time to load, but that's not an ideal solution. Instead, you can use setTimeout to make code run after a period of time.
setTimeout(function(){
window.location.hash = 'openModal';
//or whatever else you want to happen after 1 second
},1000);
//the 1000 means after 1000 miliseconds, or after 1 second.
Hope this helps!
I have tried this code:
while (true) {
$(document).ready(function() {
setInterval(function () {
if ($("h2").text() == "Qu’est-ce qu’une année-lumière ?") {
$("#choice2").delay(200).queue(function () {
$(this).click().dequeue()
})
}
}, 10000)
}
. My aim is actually to send an answer as the page DOM is already ready if the element in the tag is verified, then i want to repeat this for as i am on that page. I tried many codes but my browser doesn't like them: it freezes... that is why i try to use an interval, but i am unable to control it yet. please i need your help...
The browser freezes because you have an infinite loop. It will just keep binding more and more ready events until the code is stopped for taking too long to run, or when the browser crashes because you have bound a zillion event handlers.
Adding the interval was the right move to make the code run more than once, but the while loop still kept it from working.
Remove the while loop, and your code will run. You don't need to dequeue a function that you queued, it will be dequeued when it runs.
$(document).ready(function() {
setInterval(function () {
if ($("h2").text() == "Qu’est-ce qu’une année-lumière ?") {
$("#choice2").delay(200).queue(function () {
$(this).click();
});
}
}, 10000);
}
The interval runs the code every 10 seconds, so there doesn't seem to be any reason to wait for 200 ms before invoking the click, though.
I am using a simple function that before it run a slow function, it put a text in the page with : "loading". But this text only show after the function finish.
I did try to add a css too, but it only run after the function finish.
I put a exemple on fiddle and replace my big function with a sleep function. and the result is the same.
http://jsfiddle.net/9nzg9f6L/5/
here the code I am using in the html page:
<div id='msg'>BEGIN</div>
<div style="cursor: pointer; color:red;" id='clickme'>click me!</div>
here is the javascript code:
$("#clickme").click(function(){
// this code only run after the sleep ...
$('#msg').text("PROCESSING");
console.log("text changed");
sleep(5000);
console.log("END function");
});
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
I cannot modify the sleep(5000) function. It is a placeholder for proprietary and obfuscated function.
even this:
http://jsfiddle.net/9nzg9f6L/7/
does not work.
Take a look at my updated jsFiddle which solves your problem.
http://jsfiddle.net/9nzg9f6L/10/
Updated Code
$("#clickme").click(function(){
//Call slow func using a Self Executing func.
(function(){
//Create the deferred object to use
var defObj1 = $.Deferred();
//Call you slow func
$('#msg').text("PROCESSING");
setTimeout(function(){
sleep(5000)
defObj1.resolve();
}, 500);
return defObj1;
})().done(FunctionTwo);
})
//We call this once the Sleep function is done.
var FunctionTwo = function(){
$('#msg').text("FUNCTION ONE COMPLETED OK..");
};
//Make it slow....
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
Here we make use of a Self-Executing anonymous function and jQuery's Deferred Object with a setTimeout to ensure the slow function executes without halting the entire app. Once done, we can call Function two which in this case simply outputs that the slow function completed.
The problem here is since javascript is single threaded language, browser just didn't have enough time to alter DOM before "slow" function blocks UI completely. To overcome this situation usually you delay slow operation by some very little time, so that DOM update can finish before bad code starts working:
$("#clickme").click(function(){
$('#msg').text("PROCESSING");
$('#msg').addClass("message");
setTimeout(function() {
sleep(5000);
}, 50);
});
Demo: http://jsfiddle.net/9nzg9f6L/6/
But of course if it is possible to make slow code asynchronous it would be the best approach in this case. Blocking UI is never a good UX. Also look into WebWorkers.
Let's say I want to change the image source onClick and do some calculations. Whats happening right now is that the source changes when the the function exits. (Dom is busy?)
How can I make it so that the image source updates right away and then the function proceeds to the while loop?
HTML:
<img src="http://goo.gl/l55G2P" id="ImageSrc">
JS:
$( "#ImageSrc" ).click(function() {
new_imgsrc="http://goo.gl/wBhyee";
$("#ImageSrc").attr('src',new_imgsrc);
test = 0
do {
test = test + 1;
console.log(test);
} while (test != 50000);
});
Here's a JSFiddle.
Not sure I understand you correctly but you could use a timeout:
setTimeout(function() {
//while loop here
}, 1000);
Where 1000 means 1 second. You could shrink this value so it doesn't wait as long.
As click() has no callback for onComplete I am not sure of a better way to achieve this.
This problem is actually a bit trickier than just setting a timeout, if you want to do it right.
The problem with setting is a timeout is that the timeout has to be large enough for the image to load. If the image isn't loaded within the timeout, it'll still have to wait for the loop.
What you have to do instead is actually give it a chance to update the DOM in between each step. To do this, you need to set up a timeout (or interval, but I prefer the timeout method since you have better control) that triggers every 0ms (basically, as fast as possible). However, since these are all timeouts, it has a chance to update the DOM in between two of these when it is ready.
console.clear();
$( "#ImageSrc" ).click(function() {
loading_imgsrc="http://goo.gl/wBhyee";
$("#ImageSrc").attr('src',loading_imgsrc);
console.log("changed");
doTest(0);
});
function doTest(test) {
test = test + 1;
console.log(test);
if (test < 1000) {
setTimeout((function() { return function() { doTest(test); }})(), 0);
}
}
JSFiddle: http://jsfiddle.net/E3zvL/4/
I'm working on ui tabs built using jQuery. Everything works except for one issue - I did a setInterval that runs a function that does a trigger("click") so that it goes to the next tab after 5000 miliseconds. It runs through each tab fine, the issue is that if the user manually clicks on a tab, the timer for the setInterval does not restart back at 0. For example if a user were to start on tab1 at 0 miliseconds and clicks on tab2 at 2000 miliseconds, the setInterval doesn't go back to 0, it would start at 2000 and run to 5000 miliseconds and would subsequently goto tab3. I understand why it's happening, I just wonder if there were a way to restart the setInterval timing without having to do a clearInterval() and creating an entirely new setInterval(). Any insight would be appreciated.
Update
Thanks for the replies - The reason I was trying to avoid using clearInterval was because I was having issues of how to write the code in a way where the clearInterval would stop the setInterval completely. The code is setup to track whenever a user has clicked a tab. The problem is the auto change function utilizes trigger('click'), so it runs the clearInterval function I wrote also when the tabs auto-change. It seems to run fairly fine on its own, but once the user starts clicking on tabs, the setInterval behaves unusually and switches tabs unpredictably. I suspect what is happening is that several setIntervals are running at once... Here's the code (If you haven't guessed it already, I'm pretty new at javascript/jquery). I've commented out parts so that it's functional, but it still doesn't function as I intended (from first post).
// auto change tabs
if( options.interval ) {
function timerCom() {
if( !$(".controller").hasClass('paused') ) {
var i = $(".tab-current > a").attr("rel");
//alert(i);
if( i == 3 ) {i = 0};
$container
.find('a')
.eq(i)
.trigger('click');
}
}
//$("#promo-items > li > a").click(function () {
//var timer;
//if( timer != null ) {clearInterval(timer);}
timer = setInterval(timerCom, options.interval);
//});
}
No, there is no way to restart a timer set by setInterval without clearing the timer.
You can't really alter intervals or timeouts, only clear them. That said it should be a simple thing to create a function that clears the interval, and then starts a new but identical one immediately with a fresh time value.
var intervalID;
var resetTimer = function() {
if (intervalID) { clearInterval(intervalID) };
intervalID = setInterval(function() {
console.log('doing stuff!');
}, 5000);
};
timer = setInterval(function() {
timerCom();
}, options.interval);
I know this post is well over 2 years old, but I ran into a similar problem just now, and I found a solution.
I was writing an image scroller that would automatically shift to the next image after a set amount of time, and whenever I clicked the navigation buttons, the transitions moved double-time.
Here's my solution:
Make the interval variable (timer in your case) somewhat global.
i.e. in the options section (assuming it was defined earlier, and then later assigned), add a null timer variable.
var options = {
'interval',
//Other variables
'timer',
};
Then, call clearInterval twice when you handle the click event.
$("#promo-items > li > a").click(function () {
if( options.timer != null ) {
clearInterval(options.timer);
clearInterval(options.timer);
}
options.timer = setInterval(timerCom, options.interval);
});
Worked like a charm for me.
Again, sorry if this is wayyyy too late.