How to Make Multiple Functions Run at Window.Onload

[blitzkreig]

Hi folks,

I’m trying to make two functions run at window.onload. How do I make that happen. Currently, the last one takes priority over the first. I want to avoid that! I want the first function to run and then the second one to run right after.

Current javascript code:

$(document).ready(function() {

 function typeWriterOne() {
            alert('ok');
        };
        window.onload = typeWriterOne;


var i = 0;
var txt = 'Are You a Provider/Partner? Login Here';
var speed = 50;

function typeWriterOne() {
  if (i < txt.length) {
    document.getElementById("question-1").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriterOne, speed);
  }
}

 function typeWriterTwo() {
            alert('ok');
        };
        window.onload = typeWriterTwo;


var i = 0;
var txt = 'Are You a User? Login Here';
var speed = 50;

function typeWriterTwo() {
  if (i < txt.length) {
    document.getElementById("question-2").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriterTwo, speed);
  }
}

});

[anon18662199]

Hello mate,

I’m not a JS/JQuery expert, but I think $(document).ready(function() {...}) just works like windows onload, and you may not do something like window.onload = typeWriterOne;, becasue this is triggered once, and if you added it before even, it won’t called at all.

Please note some statements are blocking, like alert. It means code/script will be paused until it returns something.

I see you declared function typeWriterOne twice, same for typeWriterTwo.

You may try this, but not sure if it works, since there is no any direct way to do threading in js.

$(document).ready(function() {
setTimeout(function(){function_a();},0);
setTimeout(function(){function_b();},0);
});
function function_a(){
console.log("func_a");
}
function function_b(){
console.log("func_b");
}

I also not sure if function_a is called before function_b all the time.

Have a try, keep going on great work.

[blitzkreig]

Hi @NULL_dev,

Thanks for your help. In regards to this, “I see you declared function typeWriterOne twice, same for typeWriterTwo.” , if I remove one of the function declarations, the function ceases to work.

Also, I integrated my function into yours below. But it prints the letter, “A” indefinitely! And the console says:

“Uncaught ReferenceError: func_a is not defined
at function_a (Which One Are You.js:15)
at Which One Are You.js:5”

See screenshots below:

Here is my code below:

$(document).ready(function() {
setTimeout(function(){function_a();},0);
setTimeout(function(){function_b();},0);
});
function function_a(){
	var i = 0;
	var txt = 'Are You a Provider/Partner? Login Here';
	var speed = 50;
	if (i < txt.length) {
    document.getElementById("question-1").innerHTML += txt.charAt(i);
    i++;
    setTimeout(func_a, speed);
  }	
console.log("func_a");
}


function function_b(){
	var i = 0;
	var txt = 'Are You a User? Login Here';
	var speed = 50;

	if (i < txt.length) {
    document.getElementById("question-2").innerHTML += txt.charAt(i);
    i++;
    setTimeout(function_b, speed);
  }	

console.log("func_b");
}

[anon18662199]

@blitzkreig

“Uncaught ReferenceError: func_a is not defined

The message tells it all pal, this is because there is no func_a!

This setTimeout(func_a, speed); should be setTimeout(function_a, speed);. But you did the part about function_b right.

Have a try.

[blitzkreig]

@NULL_dev, yeah I just realized that after I wrote that message. I fixed that haha.
Now the only thing, is that both functions operate simultaneously (I want the second function to happen right after the first one. Also, why is it only printing the letter, “A” indefinitely? Weird!

See screenshot here:

[anon18662199]

@blitzkreig

yeah I just realized that after I wrote that message. I fixed that haha.

@blitzkreig

Now the only thing, is that both functions operate simultaneously (I want the second function to happen right after the first one

Do you mean the function B and function A works together(parallel)? or first complete function A, then go for function B?
If you mean to run the function_b when function a finishes rendering its data, so you could call the function b not when page is loaded, instead once function A finishes its work, call function b.

@blitzkreig

Also, why is it only printing the letter, “A” indefinitely? Weird!

This is becasue everytime function_a is called, i is set to 0 again.
Fix is easy pal, pass the i as argument to the function e.g.

function function_a(step){
	var i = step;
	var txt = 'Are You a Provider/Partner? Login Here';
	var speed = 50;
	if (i < txt.length) {
    document.getElementById("question-1").innerHTML += txt.charAt(i);
    i++;
//    setTimeout(func_a, speed);
    setTimeout(function(){function_a(i)}, speed);
  }else{
//here when function A finished rendering the result
}
console.log("func_a");
}

Or let the variable i as global(note: if i goes global, rename the i variable in function b to something else like k)

I also suggest you merge two function(A and B) into one function, since both function A and B do one same thing, but different data.

[blitzkreig]

@NULL_dev ok! Thanks for these new instructions! Will try these and get back to you if I have any more questions!

[blitzkreig]

Hi @NULL_dev,

I implemented some of your instructions. Why is it now only showing one function, and why is it being output to two different lines, when it’s one sentence!

See code here:

$(document).ready(function() {
setTimeout(function(){function_a();},0);
setTimeout(function(){function_b();},0);
});

function function_a(step){
	var i = step;
	var txt = 'Are You a Provider/Partner? Login Here';
	var speed = 50;
	if (i < txt.length) {
    document.getElementById("question-1").innerHTML += txt.charAt(i);
    i++;
    setTimeout(function(){function_a(i)}, 50);
  }	else{
console.log("function_a");
}
}

function function_b(){
	var i = 0;
	var txt = 'Are You a User? Login Here';
	var speed = 50;

	if (i < txt.length) {
    document.getElementById("question-2").innerHTML += txt.charAt(i);
    i++;
    setTimeout(function(){function_a(i)}, 50);
  }	else{
console.log("function_a");
}
}

Also, in regards to this: “If you mean to run the function_b when function a finishes rendering its data, so you could call the function b not when page is loaded, instead once function A finishes its work, call function b”, yes, this is exactly what I mean!

[anon18662199]

Good progress,

Ok, now as you like second function(fucntion_b) starts after function a finished, you should not call it by page onload, and just need to call the function_a. So first comment out the function_b call when page is loaded.

Another thing you should do, is padding the step input argument to function_b, just like what you did for function_a.

Now function_a, once it finished drawing the text, it will reach the else block. So simple you can call function_b here(no need to call it by setTimeout), call it directly like function_b(0);

And please note you forgot pass zero to function_a by windows on load, please fix.

[blitzkreig]

Hi @NULL_dev,

Somethings are working a little better, but it’s still not there yet

1. The text for function a repeats indefinitely!
2. Also, after the first sentence is written, it is then repeated again without the letter “A” for the word, "Are"
3. function b is not working (the second sentence isn’t being written).

What I’m I doing wrong?

This is the code I have right now:

$(document).ready(function() {
setTimeout(function(){function_a(0);},0);

$('.Partner').on('click', function() {
    location.href = 'file:///D:/Web%20Development/Concept%20Login%20Form.html'    
});

$('.User').on('click', function() {
    location.href = 'file:///D:/Web%20Development/Concept%20Login%20Form.html'    
});

});

function function_a(step){
	var i = step;
	var txt = 'Are You a Provider/Partner? Login Here';
	var speed = 50;
	if (i < txt.length) {
    document.getElementById("question-1").innerHTML += txt.charAt(i);
    i++;
    setTimeout(function(){function_a(i)}, 50);
  }	else{
function_b(0);
}
}

function function_b(step){
	var i = step;
	var txt = 'Are You a User? Login Here';
	var speed = 50;

	if (i < txt.length) {
    document.getElementById("question-2").innerHTML += txt.charAt(i);
    i++;
    setTimeout(function(){function_a(i)}, 50);
  }	else{
console.log("function_a");
}
}

Thanks in advance for your help!

[anon18662199]

Good working,

I suggest you keep some study and reading about how to debug a program, this is okay to ask for issues, but if you could the way how to debug will make you a very great dev.

So now let’s see what’s the problem.

I see you did not do the function_b part correctly like function_a.

I’ll giving you a hint ,so you could fix it.
Since function_a does it’s work for the first time right, so we assume function_a is doing its work right, no doubt.
You see function_a calls the function_b when it finished it’s job, but as you see the function_a is called again(that function_a repeats indefinitely you mentioned)
So the issue s about the function_b
If you check the function_b, you will find somewhere it calls the function_a by mistake! find the issue and fix it.
Another hint: look at how does function_a works, the function_b should be the same logic as it is.

Feel free to ask for more hint comrade, but I believe you can do it.

Debug hint: use console.log() to debug your code. e.g. place console.log('Hello') anywhere you want to sure that line will be executed, you can print a var value too.

keep going on great work comrade, you can do it. no rush, always review your code clearly, use the test table debug approach too.

Happy coding.

[blitzkreig]

Thanks teacher, @NULL_dev, I found the mistakes and fixed them! One thing I definitely want to learn thoroughly is using console.log to look for issues…the most important part, being what to log to the console…that part is tricky for me…

[anon18662199]

It’s very easy pal.

Let say you want to check a variable value at a certain line of code, so it goes like console.log(<<var_name_here>>)

And what does console.log? where to find the logs?
It’s easy, Firefox, Chrome, Opera, and Safari could come with a section called developer tools.

On chrome you may right click anywhere of the page, and select “Inspect” , or simply press ctrl + shift + I. Then you have DevTools page opened, check the console section. it tells you the logs.

Let’s have an example, assuming following code(try it):

function sample_func(a , b){
console.log("function sample_finc, a(rotate deg):"+a+" ,b(bg):"+b);
document.getElementsByTagName("body")[0].style.transform="rotate("+a+"deg)";
document.getElementsByTagName("body")[0].style.backgroundColor=b;
console.log("function sample_func done.");
}
sample_func(180,"#CCFFCC");

Create an empty html file, put some sample data(like some paragraph, etc…, some text)
Then go for script section and add above code.
run the file.
Go to devtools and check the console section, you should see the logs on console section
Note: if there is nothing there, keep the devtool windows open and refresh the page(F5)

Just be patient, as you grab more experiences, things get easier and easier for you pal, no rush, try to be patient at all aspects.

Keep going on great work, happy programming.