onHashChange:原生Javascript函数运行良好，但是

onHashChange: native Javascript function works well, but!

本文关键字：但是 运行 函数 原生 Javascript onHashChange      更新时间：2023-09-26

我在网上的某个地方发现了这种代码的平静。我试过了，它工作正常：

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正在更改时，即使我只对页面中的哈希进行了 3 次更改，console.log也会充满"更改"的文本！

好吧，我调用一个函数"而不是控制台.log，同时会再次回调onHashChange

有什么技巧可以克服它吗？

谢谢:)

这应该适用于通过 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
  });
相关文章：