理解hashchange事件的执行顺序

Question

关于此代码段，我有一个问题要问您：

window.location.hash=1;

$(window).on('hashchange', function() {
    alert('hello');
});

上面的脚本应该这样做：

1. 设置位置哈希为1
2. 在任何进一步的变化-

这就是问题所在：为什么在第一次执行时调用hashchange？这个脚本不应该只更改哈希而不更改任何警报吗？

我如何修复它，使其按描述工作？

Answer 1

另一种不调用setTimeout的方法是注册hashChange事件，然后设置hash的值。

$(window).on("hashchange",function() 
{
  alert('Invoked due to hash change' + window.location.hash);
});

alert('Hash Updated');
window.location.hash = "1";

小提琴：http://jsfiddle.net/86829ryz/10/

Answer 2

在代码中使用计数器：

var counter = 0;

$(window).on('hashchange', function() {
    if (counter)
        alert('hello');
    counter++;
});

Answer 3

首先，你问：

为什么在第一次执行时调用hashchange？这个脚本不应该只更改哈希而不更改任何警报吗？

为了回答这个问题，我们可以深入研究规范。当导航到一个新片段（即设置document.location.hash）时，规范会经过许多步骤，其中一个步骤是：

穿越历史的规范接着说：

1. 如果状态更改为true，则使用PopState事件接口在文档的Windows对象处触发名为popstate的可信事件，并将state属性初始化为state的值。此事件必须冒泡，但不能取消，并且没有默认操作。
2. 如果哈希更改为true，则使用HashChange事件接口，将oldURL属性初始化为旧URL，将newURL属性初始化为新URL，在浏览上下文的Windows对象处触发名称为hashChange的可信事件。此事件必须冒泡，但不能取消，并且没有默认操作。

因此，所有这些加在一起意味着，当您运行代码时，将在步骤14的子步骤中的代码运行之前添加hashChange的事件侦听器，并在设置散列时随后触发。

我如何修复它，使其按描述工作？

要解决此问题，您还可以使用setTimeout（..，0）将事件侦听器的添加排队：

setTimeout(function() {
    $(window).on('hashchange', function() {
        alert('hello');
    });
}, 0);

由于您在设置哈希后将其添加到队列中，因此它将在上面步骤14中排队的任务之后添加到队列中，因此事件侦听器仅在事件被触发后才被添加。