Question

我正在尝试编写一个带有2步功能的代码来重写navlinks。我有删除链接功能，然后添加1组链接的功能，然后另一个按钮做同样的事情，但有不同的链接。这就是我所拥有的。（包含1中组件的HTML）

        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>

execFunction()和execFunction2()打破了它。我有它，以便在点击链接集1时，它执行execFunction()，它应该执行removeLinks()函数，然后使用以下linksAddSet1()或linksAddSet2()添加链接。但它似乎没有延迟，这使得两个函数同时运行，导致它失效或链接立即生成然后让removeLinks()函数删除它们。在两个函数调用之间设置“延迟”的任何方法都可以让它们都安全地执行吗？

Answer 1

我认为你不需要拖延。在按顺序执行时，您尝试的内容很好。您的removeLinks函数中存在脚本错误。我把它修好了，它按预期工作。请参阅 fiddle demo

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

代码段

＆＃13;

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();
    }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

函数调用，延迟，然后再次调用函数

1 个答案:

代码段