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

Posted 2023-04-13

【中文标题】以编程方式更新哈希时禁用 hashchange 侦听器（jQuery BBQ）

【英文标题】：Disabling hashchange listener when updating hash programatically (jQuery BBQ)

【发布时间】：2011-09-11 13:37:33

【问题描述】：

为了防止在以编程方式设置 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;
    , 

【参考方案1】：

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

if(that.hashChangeEnabled == true)
  stateObj = event.getState() 
  that.stateChangedHandler(stateObj);

else 
  that.hashChangeEnabled = true;

在您的 updateURL 函数中，您可以检查哈希是否更改：

if (hash !== $.param.fragment()) 
  this.hashChangeEnabled = false;
  $.bbq.pushState(hash);

或者用 setTimeout 重置 hashChangeEnabled（如果 hash 改变了，等待 hashchange 事件触发）

this.hashChangeEnabled = false;
$.bbq.pushState(hash);
setTimeout(function()  this.hashChangeEnabled = true; , 500);

【讨论】：

问题是 BBQ 不会检查新状态是否真的不同。因此，如果我推送相同的状态，hashChangeEnabled 将设置为“false”而不是重置为“true”，因为您在从未触发的 hashchange 侦听器中执行此操作..！？谢谢！