关于history.back()方法,官方文档里面有一句话:This method is asynchronous(这个方法是异步的).
这就导致了一个问题,如果连续往执行两次history.pushState()方法,在这中间执行history.back()。为了方便,本文中对将pushState函数的参数简化为数字,相关函数具体调用方法请另行查阅。预期效果最后history栈中只剩下2,且当前指针指向2。如下所示:
history.pushState(1);
history.back();
history.pushState(2);
实际上history.back()方法会在两次push执行完后再执行。实际执行顺序如下:
history.pushState(1);
history.pushState(2);
history.back();
所以上述代码实现完之后,history栈中还存在1,且当前位置指针指向1。这就是history.back()方法是异步的所引起的问题。
若想达到预期的效果,解决方法是在给第二个history.pushState()方法放在settimeout函数中延迟执行。如下所示:
history.pushState(1);
history.back();
setTimeout(()=>{
history.pushState(2);
},30);