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()函数即可。

示例：

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

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

2 个答案: