以编程方式更新哈希时禁用 hashchange 侦听器 (jQuery BBQ)

dan*_*ani 5 javascript jquery fragment-identifier hashchange jquery-bbq

为了防止在以编程方式设置 URL 哈希 (#) 时出现反馈循环(与手动更改 URL 相比),我想暂时禁用 hashChange 侦听器。

在使用$.bbq.pushState(hash)更新哈希时,我应该如何更改此代码以实际禁用 hashchange 事件?(下面的代码不起作用)

hashChangeEnabled : true,

bindHashChange : function(){
        var that = this;

        $(window).bind( 'hashchange', function( event ) {
            if(that.hashChangeEnabled == true){
                stateObj = event.getState() 
                that.stateChangedHandler(stateObj);
            }
        });

    },



updateURL : function(hash){
        this.hashChangeEnabled = false; // <--- Look here 
        $.bbq.pushState(hash);
        this.hashChangeEnabled = true;
    }, 
Run Code Online (Sandbox Code Playgroud)

ist*_*men 1

当事件处理程序中的代码执行时,hashchange 事件异步触发,hashChangeEnabled 已重置为 true。您应该在 hashchange 事件中重置 hashChangeEnabled:

if(that.hashChangeEnabled == true){
  stateObj = event.getState() 
  that.stateChangedHandler(stateObj);
}
else {
  that.hashChangeEnabled = true;
}
Run Code Online (Sandbox Code Playgroud)

在 updateURL 函数中,您可以检查哈希值是否已更改:

if (hash !== $.param.fragment()) {
  this.hashChangeEnabled = false;
  $.bbq.pushState(hash);
}
Run Code Online (Sandbox Code Playgroud)

或者使用 setTimeout 重置 hashChangeEnabled (如果哈希发生更改,则等待 hashchange 事件触发)

this.hashChangeEnabled = false;
$.bbq.pushState(hash);
setTimeout(function() { this.hashChangeEnabled = true; }, 500);
Run Code Online (Sandbox Code Playgroud)