onHashChange：原生Javascript功能運行良好，但！

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