JavaScript setTimeout 5 seconds - javascript

Trying to get a setTimeout to load a JS after 5 seconds, I can't seem to get it to work; closest one I can find on the forums is this Problem with setTimeout
What I was trying was this:
<script type="text/javascript">
function()
{
var load = setTimeout(redirect, 5000);
redirect.src = src="js/load.js";
}
</script>
JavaScript is not my strongest area.

Your code is a total mess. Assuming you mean to dynamically load JS resource, that's the way to do it.
First, have this:
<script type="text/javascript" id="redirect"></script>
And the code:
var load = setTimeout(function() {
document.getElementById("redirect").src="js/load.js";
}, 5000);

var myFunction = function(){
// your function stuff in here.
};
setTimeout(myFunction, 5000);
In this case, the function is available separately from the setTimeout as well.

You have to create a loop function that does what you want.
Like this:
(function myloop (i){
setTimeout(function(){
//HERE IS YOUR CODE DO WHAT YOU WANT
},5000)
})(i);

Related

is there a way to delay a window.onload event?

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!

Function only called once from $(function(){

So in my js script I use jQuery, at the top I wrote:
$(function() {
myFunc();
function myFunc() {
console.log("1");
}
});
"1" is only printed once which means myFunc only ran once, I want it to run every frame/millisecond or basically as fast as it can over and over and over again. Why doesn't it happen like so? If I'm doing it wrong, how can I achieve the effect I want, and what is my mistake?
#Vadim Tatarnikov to call as soon as faster a function in jquery use
window.setInterval() with minimum time interval try the below code
<script type="text/javascript" src="jquery.js"></script>//add your jquery script file
<script type="text/javascript">
$(document).ready(function(){
window.setInterval(function(){
myFunc();
},1);//here i put time interval=1 millisecond
});
function myFunc(){
console.log("1");
}
This will call myFunc() in every 1 millisecond just run and see the console.
you have written IIFE (immediately invoked function expressions) and the main function runs only once.
You need to call your inner function using setInterval with 0 milliseconds gap.
$(function(){
function myFunc(){
console.log("1");
}
setInterval(myFunc,0);
});
your anonymous function (the outer one) runs when the page is loaded. This places a call to myFunc which outputs 1 to the console and then ends. If you wanted to loop you might try calling myFunc at the end of the myFunc function, but if you did this you would find that your browser would hang and that eventually you run out of memory. This is because the call stack would grow and grow, never allowing the UI to respond as javascript is completely in control!
Alternatively, you can use setTimeout(myFunc, delay) at the end of your method, which will call it again after a certain amount of milliseconds has passed. This will not fill the call stack and will allow the UI to respond, but you will have to specify the interval.
A final way is to use 'setInterval(myFunc, delay)' in the place of your outerbody call to 'myFunc()'. This will repeatedly call your function every 'delay' milliseconds forever.
From the comments, it seems to be clear that you are in dire need to having a Responsive Framework.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
It removes the need for having/designing separate pages for mobile and desktop.
Just go through the pre-defined bunch of CSS classes and you are set.
No need to write complex logic for window resizing and all that..
Hope it helps.
If you just need to check for changing window size per your comment, try
$(function () {
$(window).resize(function () {
//insert code here
});
});
you can use setTimeout() for execute same function after some interval assume 5 seconds
$(function() {
myFunc(); // call initially when dom is ready
function myFunc() {
console.log("1");
setTimeout(function(){ myFunc(); }, 5000) // runs after every 5 seconds
}
});
you can use setInterval() as well.
$(function() {
function myFunc() {
console.log("1");
}
setInterval(myFunc,0);
});
Your code only runs once (when the page loads). If you want to run code as fast as your computer can handle, use while(true) {/Your Code here.../} or var interval = setInterval(1, function() {/Your Code Here/});will run the code every 0.001 seconds, and clearInterval(interval); to stop the code from running. See this link for more details.
You can do by:
while(1){
myFunc();
}
But explain your requirement first.
If you want a function to run every time you should be placing your function in setInterval with interval of 1ms though its not a recommended way of doing it.
$(function(){
setInterval(myFunc,1)
function myFunc(){
console.log("1");
}
});
could you please explain your use case for the same,or you could also try to wrap your function call inside a loop.

Why can't I my function to be called every few seconds?

I am trying to call a function every few seconds as shown here:
HTML:
<div id="Result">Click here for the message.</div>
JS:
$(document).ready(function () {
$("#Result").click(function () {
var timeout = setTimeout(function () {
$('post').each(function () {
dater();
});
}, 3000);
});
});
function dater() {
$("#Result").text("hi");
}
The problem is that this is not being triggered; so, what am I missing, or doing wrong?
Alternatively, is there a better way to do what I am trying to do?
Problem #1
You did not include jQuery in the JS Fiddle demo.
Problem #2
A setTimeout only executes once, unless it calls itself. Either do that or use setInterval, which executes every x milliseconds.
Also, there are no <post> elements in HTML, use a class instead. Also include it in the fiddle or it won't work.
$(document).ready(function () {
$("#Result").click(function () {
var timeout = setInterval(function () {
$('.post').each(dater);
}, 3000);
});
});
function dater() {
$("#Result").text("hi");
}
JS Fiddle Demo
Note
Both setTimeout and setInterval only start after the time set. If you want the function to be executed instantly as well, you could do something like this.
Let's go further
It might be a better choice to use setTimeout, as mentioned in other answers. Here is an example on how to do that:
var timeout;
$(document).ready(function () {
$("#Result").click(daterForEachPost);
});
function daterForEachPost() {
$('.post').each(dater);
// The function will call itself every 3000 ms
timeout = setTimeout(daterForEachPost, 3000);
}
function dater() {
$("#Result").text("hi");
}
JS Fiddle Demo
The .setTimeout() method will run only once. In order to run periodically (with the specified timeout interval), use .setInterval().
Try to use setInterval() instead.
Here the information provided in w3schools.
"The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval."

How to run a JavaScript function after x seconds

I am trying a JavaScript function after 10 second of body load. But it is showing immediatly after body load. I am not expert in JavaScript, so I am not able to find where is the problem. my code is below:
<script type="text/javascript">
window.onload=setInterval(div_show(), 10);
</script>
<script>
window.onload = function(){
//time is set in milliseconds
setTimeout(div_show, 10000)
};
</script>
You need to:
Assign a function to onload. setInterval returns an interval id, not a function
Pass a function to setInterval, div_show() will call the div_show function and pass its return value
Multiple your number of seconds by 1000. setInterval's second argument is accepts a number of milliseconds not seconds.
Such:
onload = function () {
setInterval(div_show, 10 * 1000);
}
Finally, if you want to run the function 10 seconds after the document loads, rather than every 10 seconds starting from when the document loads, use setTimeout instead of setInterval.
Wrap it inside a function.
<script type="text/javascript">
window.onload = function(){
setInterval(div_show, 10);
}
</script>
Also, if you're sure if you want to execute this function only once when the body loads, you might as well want to use setTimeout instead of setInterval. Like
<script type="text/javascript">
window.onload = function(){
setTimeout(div_show, 10);
}
</script>
If you want 10 it to execute after 10 seconds, you need to set the timer parameter to number of seconds * 1000
In your case, 10*1000
Either
setTimeout(div_show, 10*1000);
or
setTimeout(div_show, 10000);
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 1000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>

Javascript setTimeout function in window load event... not working

I've done this a month before...
But now its not working...
The code is
window.onload = function(){
setTimeout(function(){
alert("Hello");
}, 10000);
};
This is written in script in head of the test.php page.
The script and other tags are correct.
I would like to call a specific function every 10 seconds. The alert just shows once only. This is problem in every browser....
After this testing i would like to check the url every 2 seconds and call an AJAX function.
Any Help??
That's what setTimeout does (executes once after a specified interval). You're looking for setInterval (calls a function repeatedly, with a fixed time delay between each call to that function):
window.onload = function(){
setInterval(function(){
alert("Hello");
}, 10000);
};
Use setInterval instead.
var fn = function(){alert("Hello")};
It is possible using setTimeout:
window.onload = function(){ setTimeout( function(){ fn();window.onload() },10000) };
but the best solution is setInterval:
window.onload = function() { setInterval(fn,10000)};
setTimeout is intended for one-time run. Look at setInterval function.

Categories