页面刷新后如何延迟javascript函数的执行？答案

【问题标题】：How can one delay javascript function execution after page refresh?页面刷新后如何延迟javascript函数的执行？
【发布时间】：2018-01-05 02:09:32
【问题描述】：

作为 JavaScript 的新手，我需要从 sessionStorage 检索数据并在父输入刷新后填充我的父输入表单以更新一些子记录。我可以调用函数来刷新页面和函数来独立地从 sessionStorage 获取数据，但是我无法组合这些进程，以便 a) 页面完全重新加载，然后 b) 从 sessionStorage 中检索数据页面重新加载后。怎么能做到这一点？

我的页面刷新代码（尝试使用 setTimeout 方法组合功能）如下：

<script> 
function refreshPage() {
location.reload();
setTimeout(GetSessionData, 4000);
}
</script>

我从 sessionStorage 中获取数据的函数如下：

<script>
var inputcollection = document.getElementsByTagName("input");

function GetSessionData() {
    for (var i = 0; i &lt; inputcollection.length; i++) {
    if(document.getElementById(inputcollection[i].name) != null || document.getElementById(inputcollection[i].name) != undefined) {
    console.log(i + " " + inputcollection[i].name + "-" + inputcollection [i].value + "-");
    if(document.getElementById(inputcollection[i].name).type != "file"){
   document.getElementById(inputcollection[i].name).value = sessionStorage.getItem(inputcollection[i].name);
   }}}
</script>

【问题讨论】：

不能......页面重新加载，之后的任何内容都不会运行。

标签： javascript

【解决方案1】：

当你在 refreshPage() 函数中执行你的函数时，它会执行前面的指令来刷新页面 location.reload()，所以它会刷新页面，函数执行由于页面重新加载而停止并且以下待处理的代码永远不会执行。

您应该在页面刷新/加载后将 GetSessionData() 函数执行放在文档正文的加载事件中，并将其从刷新中删除。

<html>
  <head>    
  <!--Many things -->
     <script> 
     function refreshPage() {
       location.reload();
     }
     </script>
   </head>
   <body onload="GetSessionData()">
   <!-- Your body code -->
   </body>
</html>

如果您想使用 setTimeOut 函数添加延迟，您应该将其放入另一个函数或 GetSessionData 中

function GetSessionData() {
     setTimeOut(function(){
         for (var i = 0; i < inputcollection.length; i++) {
           if(document.getElementById(inputcollection[i].name) != null || 
           document.getElementById(inputcollection[i].name) != undefined) {
               console.log(i + " " + inputcollection[i].name + "-" + 
               inputcollection [i].value + "-");
               if(document.getElementById(inputcollection[i].name).type != "file"){
                    document.getElementById(inputcollection[i].name).value = sessionStorage.getItem(inputcollection[i].name);
                }
           }
         }
       },4000);
    }

【讨论】：

感谢您的解释 - 这非常有帮助

【解决方案2】：

你可以这样做：

<script> 

    //Declare your function
    function GetSessionData() {
        for (var i = 0; i &lt; inputcollection.length; i++) {
            if(document.getElementById(inputcollection[i].name) != null || document.getElementById(inputcollection[i].name) != undefined) {
                console.log(i + " " + inputcollection[i].name + "-" + inputcollection [i].value + "-");
                if(document.getElementById(inputcollection[i].name).type != "file"){
                    document.getElementById(inputcollection[i].name).value = sessionStorage.getItem(inputcollection[i].name);
                }
            }
        }
    }
    //When the page is loaded (or reloaded in your case), set theTimeout which will call the GetSessionData, 
    document.addEventListener("DOMContentLoaded", function(event) {
        setTimeout(GetSessionData, 4000);
    });

    //Declaring your refresh function
    function refreshPage() {
        location.reload();
    }
</script>

【讨论】：