This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 6 years ago.
I'm having the hardest time wrapping my head around javascript callbacks for some reason and it's causing me a lot of headaches. I have three functions that I'm trying to use to parse some data from a website like so—
function parseText() {
//this finds a bunch of DOM elements, grabs the innerHTML from each and stores
//it in an array
}
function scrollToTop() {
//this scrolls to the top of the window where I'm getting text from,
//which causes the window to load more DOM elements to parse
}
function removeOldElements() {
//this removes the already-parsed DOM elements from the DOM
}
and I've been calling it like this.. which I now realise is a completely horrid method of doing things because as soon as I switch tabs Chrome completely messes with setTimeout and setInterval timings and causes a lot of errors..
function doEverything() {
parseText();
setTimeout(scrollToTop, 2000);
setTimeout(removeOldElements, 4000);
}
setInterval(doEverything, 5000);
//this loops it every 5 seconds so I can just run it in a separate tab
//while I continue to work on other things
This works kind of.. but any pause or interruption in setInterval breaks the code, and I know I should be using callbacks for this kind of thing in order to call one once the first one is done executing, but I just can't seem to get it to work.
I've been reading about callbacks and don't really understand what the format is supposed to be.. I've tried something like this:
function parseText(callback) {
}
function scrollToTop(callback) {
}
function removeOldElements() {
}
function doEverything() {
parseText(
scrollToTop(
removeOldElements
)
)
}
setInterval(doEverything, 5000);
But this only seems to be calling scrollToTop and then parseText twice.. and doesn't call the third function at all! What the heck! Now I'm really confused..
Could anyone assist? I'm sure I'm doing something very basic completely wrong here..
You're talking about callbacks, but I don't see anything explicitly async about your code. You need to differentiate between two things here:
Synchronous function calls: where the main thread executes the whole function block and never returns control until it's all finished executing. You don't need a callback for this sort of thing, you just call your function in-line.
// some code
func()
// some more code
`
Asynchronous functions, which need some time to execute. In order not to block the main thread (usually the UI thread itself), the code is deferred till some time later when the engine can spare some processing cycles. This is where you need callbacks. It looks like this:
// some code
async_func(callback_func)
// some more code
There is no guarantee that all the code inside async_func will execute before some more code is. In fact, it will most probably execute later.
From the names of your functions, it doesn't look like any of them is doing any actual async work. So you can just call them like so:
function doEverything() {
parseText()
scrollToTop()
removeOldElements()
}
In addition, you forgot the parentheses for the last function call removeoldElements(), that's why it didn't execute.
Callback is good choice, this example may guide you further.
function one(fn) {
console.debug('one...');
setTimeout(fn, 1000);
}
function two(fn) {
console.debug('two...');
setTimeout(fn, 1000);
}
function three(fn) {
console.debug('three...');
setTimeout(fn, 1000);
}
function loop() {
console.debug('loop...');
setTimeout(function() {
one(function() {
two(function() {
three(loop);
});
});
}, 1000);
}
setTimeout(loop, 1000);
Open browser console, for logs.
I'm not sure what you are trying to do, but I suggest to you doing this:
function parseText(callback) {
//some code here
console.log("parsetext");
scrollToTop('callback');
}
function scrollToTop(callback) {
//some code here
console.log("scrollToTop");
removeOldElements();
}
function removeOldElements() {
//some code here
console.log("removeOldElements");
setTimeout(parseText, 5000);
}
ingparseText();
Related
I'm trying to implement this kind of logic in Javascript:
LOOP
doStuff();
END
console.log("Stuff has been done");
I've managed to do it this way:
var loop = function() {
console.log("events");
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);
console.log("loop is finished");
someOtherCodeGoesHere();
But it doesn't work. Well, it does, but "loop is finished" appears even before RAF is called. This whole code makes sense though, but it's not working as I want it to.
I've also figured out that I can make loop() return a callback function once a condition is met, but I don't want to enclose someOtherCodeGoesHere(); inside it because it's not what I want. Let's say if I have 10 loops, I'd have a callback hell. I just want it to keep going with the code flow, like a plain GOTO if you will.
Any ideas are welcome! :)
I am not familiar with the window.requestAnimationFrame() method, but since you are passing a callback as its only parameter I assume it is an asynchronous function. This means that its invocation does not block the execution of the methods after it. There is no guarantee that the RAF method will call the callback you passed in before the console.log is called. Normally any logic you want to happen after an async method runs you should put in the callback. Dealing with callbacks can be a pain so libraries like async can be a great help. Here is an example of how you might write this using the async lib. (This code is assuming you wanted an infinite loop due to the recursion your attempting in your code)
var loop = function() {
window.requestAnimationFrame(function() {
console.log("events");
});
}
async.forever(loop, function(err) {
console.log(err); // Only gets called if an error occurs
});
I'm trying to return a variable only after it has been set within a setTimeout callback. I couldn't think of any other way to do this, but here's my attempt (I know the code seems silly, but it's to work around a Cordova bug). For reasons beyond my understanding, it results in an infinite loop.
function isConnected() {
var done = false;
setTimeout(function() {
done = true;
}, 500);
while (!done) {}
return navigator.connection.type!== Connection.NONE;
}
Can anyone explain to me why this is happening, or provide an alternative?
Update (solution):
function isConnected(callback) {
setTimeout(function() {
callback(navigator.connection.type !== Connection.NONE);
}, 500);
}
isConnected(function(connected) {
if (!connected)
alert('Not Connected');
});
You simply can't solve your problem that way. Because javascript is single threaded, the setTimeout callback can only run when your JS thread of execution finishes so with your infinite loop, it will never get to run and your code will hang. Eventually the browser will complain about a long-running piece of JS and offer to shut it down.
Instead, you need to use a callback function on the setTimeout() and continue your code from that callback. You can't use sequential code for timeouts. You must use asynchronous coding styles.
You could do something like this where you pass in a callback and it calls the callback back and passes it the connected boolean:
function GetConnectedState(callback) {
setTimeout(function() {
callback(navigator.connection.type !== Connection.NONE);
}, 500);
}
Your existing code doesn't seem to offer anything other than a look at the connection state in 1/2 second. With any real sort of asynchronous operation in javascript (such as an ajax call or a websocket connection), there should also be a success or completion callback that will tell you when/if the operation actually completes and you can also trigger the callback based on that (sooner than 1/2 second most of the time). So, this doesn't really look like a complete solution, but it's all you show us you're using.
For example, here's an answer you can look at that calls a callback when an images loads successfully, with an error or times out with no response: Javascript Image Url Verify and How to implement a "function timeout" in Javascript - not just the 'setTimeout'. A similar concept could be used for implementing your own timeout on some other type of asynchronous call.
As I revisit this 5 years later, can't help but to offer up a fancier alternative:
await new Promise(function(resolve) {
setTimeout(resolve, 500);
});
if (navigator.connection.type === Connection.NONE) {
alert('Not Connected');
}
Javascript is single-threaded. The timeout function can't run until your script returns to the main event loop. But as long as you're in the while loop it will never return, so the timeout function never runs, so done is never set to true.
It's not possible in Javascript to wait for an asynchronous event before returning.
I want to set delay in javascript code so that XML file generated before running of javascript . Here is my html code
<body onLoad="Func1Delay()">
<div id="map"></div>
</body>
In this Func1Delay() function i have written code to delay execution of javascript
function Func1Delay()
{
setTimeout("load()", 3000);
}
load() is javascript function ? how can i delay execution of javascript code so that xml file successfully generated before code execution??
Seems like your downloadUrl function provides a callback. The callback function fires automatically, after the XML is loaded. You do not need a 3 second delay, just move your logic inside the callback function. Something like this:
function Func1Delay() {
downloadUrl("location.xml", function (data) {
var xml = data.responseXML;
// do any thing with xml, it is loaded!
// alert(xml);
});
}
That's how you do it, except you don't want to use a string (although it works — provided you have a function called load defined at global scope). setTimeout schedules a function to be called a given number of milliseconds later.
It's better to give it an actual function reference:
function Func1Delay() {
setTimeout(load, 3000);
function load() {
// Stuff to do three seconds later
}
}
Note that the event you're using to trigger it, the onload of body, already happens really, really late in the page load cycle, and so whatever you're waiting for may already be done; conversely, if it might take more than three seconds, you might not be waiting long enough. So if there's something you can check to see whether it's done or not, you can poll, like this:
function Func1Delay() {
check();
function check() {
if (theWorkIsDone) {
// Do something with the work
}
else {
// Check back in 100ms (1/10th of a second)
setTimeout(check, 100);
}
}
}
You want the function to execute as soon as possible, but in every case after your xml has been successfully generated.
In this case you should prevent using a fixed amount of time (because you don't know the value exactly), but try the following:
function load(){
if (/*check here if the xml has *not yet* been generated*/){
setTimeout(load,50); // try again in 50 milliseconds
return;
}
// do your stuff here
}
This loops as long as your xml is not ready, and kicks in as soon as it's available.
General about setTimeout:
You can pass a string, but this is highly discouraged from for several reasons.
Instead pass a function reference or a function like this:
// function reference
setTimeout(load,3000) // no `()` !
// function
setTimeout( function(){load()},3000)
If you need paramters be passed to the function, you can't use the first option but need to use the second one, where you can easily pass them load(params).
If you pass a function like this: setTimeout(load(),3000) it executes the function load and passes its return value to the timeout. You however want the function invoked after 3 seconds and thus only pass the reference to the function.
Notice however, that you have a different scope if you execute the functions this way.
Sorry about the title but could not come up with anything really informative and concise.
My situation is that I am launching a setTimeout and I want it to be able to run in the middle of a JS function (it is used to get around the issue with injecting GM functions into the web page).
unsafeWindow.testG = function(key, dValue){
var rValue;
setTimeout(function(){rValue = GM_getValue(key, dValue);}, 0);
alert(rValue);
alert(rValue);
return(rValue);
}
In the three tests rValue is still undefined (which makes sense because JS is single threaded for the most part).
So I have 2 solutions I have thought of.
Favourite:
Is there anyway to tell JS to sleep in the middle of a function and work on background stuff (like Timeouts)?
Other:
Does anyone know when this timeout will be called? Maybe after this function execution but before whatever called it starts up again?
In that case making rValue global would solve the issue (but make slightly messier coding).
Or will it wait until all JS is done executing?
In that case I would possibly need another setTimeout to process the result.
There is no way what you're asking for can be accompished. Until HTML5 is a wide spread standard, you can't do what you're asking without thinking asynchronously.
For example :
unsafeWindow.testG = function(key, dValue, callback){
var rValue;
setTimeout(function(){
rValue = GM_getValue(key, dValue);
callback(rValue);
}, 0);
}
and call this with a callback :
unsafewindow.testG(key, dValue, function(rValue) {
alert(rValue);
});
alert("foo");
For the last sippet, "foo" will be echoed before rValue, because testG will execute the timeout function only when the Javascript thread is available, or only when there's no other script running.
To answer your first question, there is no 'sleep' function in JS. In fact, there is a site devoted to trying to create one: http://www.devcheater.com/ The conclusion: you cannot.
If what you'd like to do is make the rest of your code run later, you can put that code in a function and setTimeout().
Of course, the usual way to handle the sort of scenario you have set up is with callbacks. Since you're basically waiting for the thing in setTimeout to happen, you can have it call the rest of your code whenever it's done. For example:
var fartResult
function waitAMinuteThenFart (callback) {
function fart () {
fartResult = 'fart'
callback(fartResult)
}
setTimeout(fart, 1000*60)
}
waitAMinuteThenFart(function (result) { alert(result) })
I've got a sequence of Javascript function calls in a function I have defined to be executed when a web doc is ready. I expected them to be executed in sequence, as one ends the next begins, but the behaviour I see doesn't match up with that.
Additionally there is manipulation of the graphical components going on in between the calls (for example, I add in a checkpoint time to draw on a div on the page inbetween each of the mentioned calls) but those redraws aren't happening in sequence... they all happen at once.
I'm a bit of a n00b with the whole javascript-in-the-browser thing, is there an obvious mistake I'm making, or a good resource to go find out how to do this stuff?
Update - sample
// called onReady()
function init() {
doFirstThing();
updateDisplayForFirstThing();
doSecondThingWithAjaxCall();
updateDisplayForSecondThing();
...
reportAllLoaded();
}
IE won't update the display until the current script is finished running. If you want to redraw in the middle of a sequence of events, you'll have to break your script up using timeouts.
If you post some code we can help refactor it.
edit: here's a general pattern to follow.
function init() {
doFirstThing();
updateDisplayForFirstThing();
}
function updateDisplayForFirstThing() {
// existing code
...
// prepare next sequence
var nextFn = function() {
// does this method run async? if so you'll have to
// call updateDisplayForSecondThing as a callback method for the
// ajax call rather than calling it inline here.
doSecondThingWithAjaxCall();
updateDisplayForSecondThing();
}
setTimeout(nextFn, 0);
}
function updateDisplayForSecondThing() {
// existing code
...
// prepare next sequence
var nextFn = function() {
// continue the pattern
// or if you're done call the last method
reportAllLoaded();
}
setTimeout(nextFn, 0);
}
This can be fixed for many cases by using callbacks, especially with AJAX calls -- for example:
function doFirstThing(fn){
// doing stuff
if(typeof fn == 'function') fn();
}
function updateDisplayForFirstThing(){
// doing other stuff
}
function init(){
doFirstThing(updateDisplayForFirstThing);
}
Another option is to use return values:
function doFirstThing(fn){
// doing stuff
if(x) return true;
else return false;
}
function updateDisplayForFirstThing(){
// doing other stuff
return true;
}
function init(){
if(doFirstThing()){ updateDisplayForFirstThing(); }
}
setting timeouts to step through your code is not really a good way to fix this problem because you'd have to set your timeouts for the maximum length of time each piece of code could possibly take to execute.
However, you may still sometimes need to use a setTimeout to ensure the DOM has properly updated after certain actions.
If you end up deciding that you would like some JavaScript threading, check out the still being drafted Web Workers API. Browser support is hit and miss though the API is implemented in most modern web browsers.
Question: exactly how did you go about determining when the "doc is ready"? The DOMContentLoaded event isn't supported in IE I'm fairly certain... if you're in need of waiting for your document to load in its entirety you could use something like this:
var onReady = function(callback) {
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", callback, false);
return true;
} else if (document.attachEvent) {
var DOMContentLoaded = function() {
if (document.readyState === "complete") {
document.detachEvent("onreadystatechange", DOMContentLoaded);
onReady();
}
};
return true;
}
};
Then of course you'll need to develop a setTimeout testing for some flags state indicating the page is loaded upon completion before continuing the execution of the rest of your code... that or any number of other methods...
Or you could just include the script at the bottom of your body...
I'm just rambling though until you have some code to show us?