How Dynamically create two <script> tags to execute one after another.

This issue has occurred when I’m dealing with the Zendesk Help web widget. It has a prefill function to prefill the user data to help desk form

As the Zendesk says we can do it with a script tag and its that much easy. but in the system I’m working, we are hiding the web widget when the user directed to the login screen. so we cannot use the script tag in the index.html head tags because it will always show the script that’s why I used the script in a separate JS file and loaded when needed.

So for loading, I have used the way we all know like this

So the thing is I have 2 of these script tags that need to be created but the special scenario is the second script tag need the library that comes with the first script tag to execute the function that has.

When we use the script tags in the HTML header tag it’s going to load one by on to the order that we have placed the scripts. but when we run the scripts in this dynamic way it’s going to execute at the same time. So it will give errors.

So I needed to add the first script and after it added I need to add the second script.

Yeah, you will say we can use setTimeOut() function but it’s not a good way of doing such things because we cannot guess exactly after this time this script will be loaded. So I needed to get rid of the setTimeOut() function So this is what I have done.

Here is the GIST

So this way we can get rid of the setTimeOut() and run the script after one another in a situation that we need to run more than one scripts.

Happy Coding….