Question

我在网上找到了一些代码的和平。我试过了，它工作正常：

var onHashChange = function(event) {

    //get hash function
    var getHashValue = function() {

        var arr = window.location.hash.split("#");

        var hasValue = arr[1];

        //sets default
        if (typeof hasValue == "undefined") {
            return false;
        }

        var hashLen = hasValue.indexOf("?");
        if(hashLen>0){
            hasValue = hasValue.substring(0,hashLen);
        }
        return hasValue;

    }

    //last hash
    var lastHash = getHashValue();

    //checker
    (function watchHash() {
        var hash = getHashValue();

        if (hash !== lastHash) {
            event();
            lastHash = hash;
        }

        var t = setTimeout(watchHash, 100);

    })();

}

但是当多次在onHashChange中调用的函数时，它将永远重复。

onHashChange(function() {
  console.log("changed"); 
});

当我在同一页面并且hash被更改时，console.log将充满“已更改”文本，即使我仅对页面中的哈希进行了3次更改！

好吧，我正在调用一个函数“而不是console.log”，同时会再次回调onHashChange

克服它的任何伎俩？

谢谢：）

Answer 1

这应该可以通过history.replaceState和history.pushState对哈希更改和网址进行更改！

  var onUrlChange = function(event) {
    var getHashValue = function () {
      var arr = window.location.hash.split("#");
      var hasValue = arr[1];
      if (typeof hasValue == "undefined") {
        return false;
      }
      var hashLen = hasValue.indexOf("?");
      if (hashLen > 0) {
        hasValue = hasValue.substring(0, hashLen);
      }
      return hasValue;
    }

    var getUrlValue = function () {return window.location.pathname;}

    var lastHash = getHashValue();
    var lastUrl = getUrlValue();

    (function watchPath() {
      var hash = getHashValue();
      var url = getUrlValue();
      if (hash !== lastHash) {
        event();
        lastHash = hash;
      }
      if (url !== lastUrl) {
        event();
        lastUrl = url;
      }

      var t = setTimeout(watchPath, 100);

    })();
  }

  onUrlChange(function () {
    //somthing
  });

onHashChange：本机Javascript函数运行良好，但是！

1 个答案: