javascript - onHashChange : native Javascript function works well, 但是!

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 进行哈希更改和 url 更改!

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