Function Call, Delay, Then Function Call again

Question

I'm trying to write a code with a 2 step function to rewrite navlinks. I have the remove links function, then the function that adds 1 set of links, then another button doing the same thing but with different links. This is what I have. (HTML with the components in 1)

        function execFunction() {
          removeLinks();
          linksAddSet1();
        }

        function execFunction2() {
          removeLinks();
          linksAddSet2();
        }

        function removeLinks() {
          var list = document.getElementById("output2");
          list.removeChild(list.childNodes[0]);
          list.removeChild(list.childNodes[0]);
          list.removeChild(list.childNodes[0]);
          list.removeChild(list.childNodes[0]);
          list.removeChild(list.childNodes[0]);
          list.removeChild(list.childNodes[0]);
        }

        function linksAddSet1() {
          var out = document.getElementById("output2");
          var args = ["About", "Games", "The Hideout", "Staff", "Donate", "Contact Us", ];

          function displayMenu() {
            var ul = document.createElement('ul');
            ul.className = "mainMenu";
            args.forEach(function(name, index) {
              var li = document.createElement('li'),
                an = document.createElement('a');
              li.className = "mmenu-item-" + index;
              li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css";
              an.innerHTML = name;
              an.setAttribute('href', "http://www.thegaminghideout.com/" + name + ".html");
              li.appendChild(an);
              ul.appendChild(li);
            });
            out.appendChild(ul);
          }
          if (output2.childNodes.length > 0) {} else {
            displayMenu();
          }
        }

        function linksAddSet2() {
          var list = document.getElementById("output2");
          var out = document.getElementById("output2");
          var args = ["Tools", "Tutorials"];

          function displayMenu() {
            var ul = document.createElement('ul');
            ul.className = "mainMenu";
            args.forEach(function(name, index) {
              var li = document.createElement('li'),
                an = document.createElement('a');
              li.className = "mmenu-item-" + index;
              li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css";
              an.innerHTML = name;
              an.setAttribute('href', "http://www.thegaminghideout.com/" + name + ".html");
              li.appendChild(an);
              ul.appendChild(li);
            });
            out.appendChild(ul);
          }
          if (output2.childNodes.length > 0) {} else {
            displayMenu();
          }
        }

        #navigation {
          width: 760px;
          height: 35px;
          position: absolute;
          border-bottom: 2px solid #000000;
          background: orange;
          padding: 0px;
        }
        #navigation .padding {
          padding: 2px;
        }
        #navigation .navlinks {
          position: absolute;
          top: 1px;
          left: 0px;
        }
        #navigation .navlinks ul {
          margin: 0px;
          padding: 0px;
          text-align: center;
          list-style-type: none;
          width: 760px;
          height: 35px;
        }
        #navigation .navlinks li {
          position: relative;
          top: 5px;
          margin: 0px 5px 0px 5px;
          list-style-type: none;
          display: inline;
        }
        #navigation .navlinks li a {
          color: #000000;
          padding: 5px 0px 9px 0px;
          text-decoration: none;
          font-size: 18px;
          font-family: karmatic_arcaderegular;
          padding: 5px 0px 9px 0px;
        }
        #navigation .navlinks li a:hover {
          margin: 0px;
          color: #ffffff;
          background: orange;
          text-decoration: underline;
        }

<div id="navigation">
  <div class="navlinks">
    <div id="output2">
      <ul class="mainMenu">
        <li class="mmenu-item-0">
          <a href="http://www.thegaminghideout.com/About.html">About</a>
        </li>
        <li class="mmenu-item-1">
          <a href="http://www.thegaminghideout.com/Games.html">Games</a>
        </li>
        <li class="mmenu-item-2">
          <a href="http://www.thegaminghideout.com/The Hideout.html">The Hideout</a>
        </li>
        <li class="mmenu-item-3">
          <a href="http://www.thegaminghideout.com/Staff.html">Staff</a>
        </li>
        <li class="mmenu-item-4">
          <a href="http://www.thegaminghideout.com/Donate.html">Donate</a>
        </li>
        <li class="mmenu-item-5">
          <a href="http://www.thegaminghideout.com/Contact Us.html">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
  <br>
  <br>
  <br>
  <button onclick="removeLinks()">Remove Links</button>
  <button onclick="execFunction()">Link Set 1</button>
  <button onclick="execFunction2()">Link Set 2</button>

The execFunction() and execFunction2() is what breaks it. I have it so that the when Link Set 1 is clicked, it executes execFunction(), which should execute the removeLinks() function, then add the links with the following linksAddSet1() or linksAddSet2(). But it doesn't seem to have a delay, which makes both functions run at the same time, causing it to either disfunction or have the links create instantly then have the removeLinks() function remove both of them. Any way to set a "delay" between the two function calls that can have them both execute safely?

possible duplicate of [What do I do if I want a JavaScript version of sleep()?](http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep) — Bijan, Oct 28 '14 at 16:53
Note that it's impossible for the two functions to "run at the same time" - JavaScript is inherently single threaded, and any block of code / event handler will run to completion before the next one begins. — James Thorpe, Oct 28 '14 at 16:55
@gvee It's now in a snippet. @ Bijan I'll keep note. @ James Thorpe Thanks for the information. — The Gaming Hideout, Oct 28 '14 at 16:57

score 0 · Accepted Answer · answered Oct 28 '14 at 16:59

I don't think you need a delay. What you were trying is fine when executed in a sequence. There was a script error in your removeLinks function. I had it fixed and it works as expected. See fiddle demo

function removeLinks() {
    var list = document.getElementById("output2");
    //http://stackoverflow.com/a/683429/297641
    while (list.hasChildNodes()) {
        list.removeChild(list.lastChild);
    }
}

Code Snippet

function execFunction() {
    removeLinks();
    linksAddSet1();
}

function execFunction2() {
    removeLinks();
    linksAddSet2();
}

function removeLinks() {
    var list = document.getElementById("output2");
    while (list.hasChildNodes()) {
        list.removeChild(list.lastChild);
    }
}

function linksAddSet1() {
    var out = document.getElementById("output2");
    var args = ["About", "Games", "The Hideout", "Staff", "Donate", "Contact Us", ];

    function displayMenu() {
        var ul = document.createElement('ul');
        ul.className = "mainMenu";
        args.forEach(function (name, index) {
            var li = document.createElement('li'),
                an = document.createElement('a');
            li.className = "mmenu-item-" + index;
            li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css";
            an.innerHTML = name;
            an.setAttribute('href', "http://www.thegaminghideout.com/" + name + ".html");
            li.appendChild(an);
            ul.appendChild(li);
        });
        out.appendChild(ul);
    }
    if (output2.childNodes.length > 0) {} else {
        displayMenu();
    }
}

function linksAddSet2() {
    var list = document.getElementById("output2");
    var out = document.getElementById("output2");
    var args = ["Tools", "Tutorials"];

    function displayMenu() {
        var ul = document.createElement('ul');
        ul.className = "mainMenu";
        args.forEach(function (name, index) {
            var li = document.createElement('li'),
                an = document.createElement('a');
            li.className = "mmenu-item-" + index;
            li.setAttribute = "link rel", "stylesheet", "type", "text/css", "href", "http://www.thegaminghideout.com/style.css";
            an.innerHTML = name;
            an.setAttribute('href', "http://www.thegaminghideout.com/" + name + ".html");
            li.appendChild(an);
            ul.appendChild(li);
        });
        out.appendChild(ul);
    }
    if (output2.childNodes.length > 0) {} else {
        displayMenu();
    }
}

#navigation {
    width: 760px;
    height: 35px;
    position: absolute;
    border-bottom: 2px solid #000000;
    background: orange;
    padding: 0px;
}
#navigation .padding {
    padding: 2px;
}
#navigation .navlinks {
    position: absolute;
    top: 1px;
    left: 0px;
}
#navigation .navlinks ul {
    margin: 0px;
    padding: 0px;
    text-align: center;
    list-style-type: none;
    width: 760px;
    height: 35px;
}
#navigation .navlinks li {
    position: relative;
    top: 5px;
    margin: 0px 5px 0px 5px;
    list-style-type: none;
    display: inline;
}
#navigation .navlinks li a {
    color: #000000;
    padding: 5px 0px 9px 0px;
    text-decoration: none;
    font-size: 18px;
    font-family: karmatic_arcaderegular;
    padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
    margin: 0px;
    color: #ffffff;
    background: orange;
    text-decoration: underline;
}

<div id="navigation">
    <div class="navlinks">
        <div id="output2">
            <ul class="mainMenu">
                <li class="mmenu-item-0"> <a href="http://www.thegaminghideout.com/About.html">About</a>

                </li>
                <li class="mmenu-item-1"> <a href="http://www.thegaminghideout.com/Games.html">Games</a>

                </li>
                <li class="mmenu-item-2"> <a href="http://www.thegaminghideout.com/The Hideout.html">The Hideout</a>

                </li>
                <li class="mmenu-item-3"> <a href="http://www.thegaminghideout.com/Staff.html">Staff</a>

                </li>
                <li class="mmenu-item-4"> <a href="http://www.thegaminghideout.com/Donate.html">Donate</a>

                </li>
                <li class="mmenu-item-5"> <a href="http://www.thegaminghideout.com/Contact Us.html">Contact Us</a>

                </li>
            </ul>
        </div>
    </div>
    <br>
    <br>
    <br>
    <button onclick="removeLinks()">Remove Links</button>
    <button onclick="execFunction()">Link Set 1</button>
    <button onclick="execFunction2()">Link Set 2</button>

Function Call, Delay, Then Function Call again

1 Answers1

Code Snippet