在执行JavaScript之前设置5秒延迟

Question

我正在尝试在执行javascript函数之前添加5秒的延迟。 该功能与按钮单击事件相关。 理想情况下，用户将单击链接，然后在执行功能之前会有5秒的延迟。 到目前为止，这是我尝试过的事情：

<input onclick="myFunction()" id="link" type="Submit" value="GO" style="border-radius: 5px;"/>

function myFunction() {
  style.transitionDelay = "5s"; 
  var url = window.location.href;
  var res = url.split("#");
  var hash = "#" + res[1];
  window.location = 'test123.com/go' + hash;
};

有任何想法吗？

Answer 1

您可以使用JS的setTimeout （ https://www.w3schools.com/jsref/met_win_settimeout.asp ）

例如：

 // define the function to call function myFunction() { console.log('timed out'); alert('ding!'); }; // get a handle on the button DOM element var btnElement = document.getElementById('btn'); // register event on button click btnElement.addEventListener('click', function(){ console.log('clicked'); // execute it in 5 secs (delay time is in milliseconds, so 5*1000=5000ms -> 5secs) setTimeout(myFunction, 5 * 1000); }); 

 <button id="btn">Click Me!</button> 

Answer 2

JavaScript具有功能setInterval(callback, time); 因此，如下面的示例中所示，您只需传递带有回调的onclick事件setTimeout()函数setTimeout()函数名称和时间以毫秒为单位）即可。

例：

<input onclick="setTimeout(myFunction, 5000)" id="link" type="Submit" value="GO" style="border-radius: 5px;"/>
<script>
    function myFunction(){
        alert(1);
    }
</script>