JavaScript无法正常运行而没有警报

Question

Okay, this one is weird and I'm not entirely sure how to word the Title for this particular question. I have a javascript function that is supposed to happen when the document is ready. The first part of the function calls a function that includes some added html pages into the page.

The next part matches the last section of the current url page and finds them in the menu to to give it a selected class, along with the parent of the menu item.

The code works, but only with the

    alert(lastpath); 

When the alert statement is removed, the lines below no longer function.

    $( document ).ready(function() {

        w3IncludeHTML();
        lastpath=(window.location.pathname).split("/").slice(-1).pop();
        alert(lastpath);
        $('a[href$="'+lastpath+'"]').attr("class","selected");
        $('a[href$="'+lastpath+'"]').parent(".dropdown-content").prev().attr("class","selected");

    });

Does anyone know what could be happening here?

Answer 1

You use the function from the JS library from w3schools . Just take a look at their code:

function w3IncludeHTML() {
  var z, i, a, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    if (z[i].getAttribute("w3-include-html")) {
      a = z[i].cloneNode(false);
      file = z[i].getAttribute("w3-include-html");
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;
          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}

It is using a XMLHttpRequest object, so we are sure it's an asynchronous code. Most likely, after your call to this function, you use lines of code which depend on the success of ajax request. This is, of course, not good (treating asynchronous code as a synchronous code), but the delay provided by alert function makes it work (sometimes ;) !).

Solution: make sure, what does the w3IncludeHTML function do and how to get rid of the synchronous code after its call. Or: try to find a way to detect when the ajax part of this function is completed. Actually, it's right there:

        if (xhttp.readyState == 4 && xhttp.status == 200) {
          a.removeAttribute("w3-include-html");
          a.innerHTML = xhttp.responseText;
          z[i].parentNode.replaceChild(a, z[i]);
          w3IncludeHTML();
        }

Answer 2

The function w3IncludeHTML defined in the w3Data library loads the content asynchronously. It offers no way to get notified when it has finished its job:

 function w3IncludeHTML() { var z, i, a, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { if (z[i].getAttribute("w3-include-html")) { a = z[i].cloneNode(false); file = z[i].getAttribute("w3-include-html"); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { a.removeAttribute("w3-include-html"); a.innerHTML = xhttp.responseText; z[i].parentNode.replaceChild(a, z[i]); w3IncludeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); return; } } } 

A quick solution would be to alter the above function, and add the following code to your script:

function w3IncludeHTML(callback) {
  var z, i, file, xhttp;
  z = document.querySelector("[w3-include-html]");
  if (!z) {
    // notify caller that all is loaded
    if (callback) callback();
    return;
  }
  file = z.getAttribute("w3-include-html");
  z.removeAttribute("w3-include-html");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4) {
      if (xhttp.status == 200) {
        z.innerHTML = xhttp.responseText;
      }
      w3IncludeHTML(callback);
    }
  }      
  xhttp.open("GET", file, true);
  xhttp.send();
}

This version will override the function provided by the w3Data library, and improve it. You can now pass a callback function to w3IncludeHTML , in which you can be sure that all content is loaded (unless errors occurred of course):

$( document ).ready(function() {
    w3IncludeHTML(function () {
      // Everything that depends on loaded content, should be done here:
      lastpath=(window.location.pathname).split("/").slice(-1).pop();
      // not needed: alert(lastpath);
      $('a[href$="'+lastpath+'"]').attr("class","selected");
      $('a[href$="'+lastpath+'"]').parent(".dropdown-content").prev().attr("class","selected");
    });
});