执行前设置 5 秒延迟 javascript

Question

我正在尝试在执行 javascript 函数之前添加 5 秒的延迟。该功能与按钮单击事件相关联。理想情况下，用户会单击 link，然后在执行该功能之前会有 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() 函数，回调函数名称和时间以毫秒为单位。

示例：

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

执行前设置 5 秒延迟 javascript

Set 5 second delay before executing javascript

javascript

transition

settimeout