单击链接后，窗口未立即加载

Question

当我单击锚链接时，应立即再次加载当前页面：

<a href="javascript:void(0);" class="BackToFirst"  
 onclick="popNav('BackToFirst');">Back</a>

function popNav(type) {
    if(type == "BackToFirst") {
       $(".first").show();
       $(".second").hide();
       $('.BackToFirst').click(function() {
           document.location.href =  window.location.href;
       });
    }
}

我希望当用户点击链接时，当前页面会立即加载，但需要一些时间才能加载。

Answer 1

您的Click处理程序仅为链接分配一个新的单击处理程序，请尝试直接导航：

 function popNav(type){
    if(type=="BackToFirst")
     {
        $(".first").show();
        $(".second").hide();
        document.location.href =  window.location.href;
     }
  }

我认为你有两个概念混淆了，上面的代码将DOM事件直接附加到链接上，另一种方法是使用JQuery将事件附加到该按钮，如下所示：

HTML：

<a href="javascript:void(0);" class="BackToFirst">Back</a>

脚本：

   $('.BackToFirst').click(function(){
       $(".first").show();
       $(".second").hide();
       document.location.href =  window.location.href;
   });

如果您仍想检查类型，那么使用JQuery时数据属性是一个很好的方法：

<a href="javascript:void(0);" class="BackToFirst" data-linktype="BackToFirst">Back</a>

   $('.BackToFirst').click(function(){
       if($(this).data('linktype') == 'BackToFirst'){
            $(".first").show();
            $(".second").hide();
            document.location.href =  window.location.href;
       }
   });

Answer 2

我认为你的代码过于复杂。 单击元素后绑定onClick。 我认为这样的事情会更好。

HTML：

<a href="#" class="BackToFirst" onclick="onClickHandler('BackToFirst')">Back</a>

JS：

function onClickHandler(type){
    if(type !== 'BackToFirst') {
        return;
    }
    $(".first").show();
    $(".second").hide();
    location.reload();
}

Answer 3

目前还不清楚你要做什么。

1. 重新加载页面时，会立即撤消显示/隐藏
2. 建议使用location.reload（1）而不是设置所谓的只读document.location
3. 您可能希望使用e.preventDefault而不是javascript void
4. 你绝对相信这不是X / Y问题吗？ 你能解释实际的用例吗？

var current = sessionStorage.getItem("which"); // does not run in a snippet
current = current ? current.split("|") : []
if (current.length) {
  $("." + current[0]).show();
  $("." + current[1]).hide();
}
$(".BackToFirst").on("click", function(e) {
  e.preventDefault();
  $(".first").show();
  $(".second").hide();
  sessionStorage.setItem("which", "first|second")
  setTimeout(function() {
    location.reload(1); // are you absolutely sure this is not an X/Y problem?
  }, 500); //let the show/hide sink in  
});

<a href="#" class="BackToFirst">Back</a>