用户需要调用的Javascript函数

Question

我是 JavaScript 的初学者。我需要在我的 Web 应用程序中添加一个功能，在这个功能中我添加了一项任务。这个任务依赖于一个定时器，35 秒后它会自动启动。但问题是，如果用户不想等待 35 秒，那么它将在 35 秒之前开始。用户点击开始按钮调用函数，任务开始。

如果用户等待 35 秒，则任务将自动启动。

这是我的功能

setTimeout(
  function hello() {
    console.log('Hello User')
  }, 35000);

<button onclick="hello()">Click me to start</button>

此代码有效，但用户单击开始按钮调用函数。然后在 35 秒后重复自动任务启动。

Answer 1

您可以使用 clearTimeout就像下面的 hello 函数。将 setTimeout 的返回值分配给任何 object。您可以使用 clearTimeout(object)取消超时。

同时在 setTimeout 之外定义 hello。由于 setTimeout 接受 callback 函数作为参数，您可以简单地使用 hello 而无需将 () 作为 parameter 像 setTimeout(hello, 5000);。或者您可以定义 setTimeout(function() { hello(); }, 5000)。

作为您的评论，如果您想在 10 秒后调用另一个函数，您可以再次使用 setTimeout(nextTask, 10000, 'This is parameter');。我已经展示了如何使用 setTimeout 传递参数。

如果你想为下一个函数调用使用 clearTimeout，那么定义全局变量来保存 setTimeout(nextTask, 10000, 'This is parameter'); 的返回值并使用clearTimeout(timeoutNextTask);。否则不需要它。

在下面试试。

function hello() {
  console.log('Hello User');
  clearTimeout(timeout);
  timeoutNextTask = setTimeout(nextTask, 10000, 'This is parameter');
}

function nextTask(x) {
  clearTimeout(timeoutNextTask);
  console.log(x);
}

var timeoutNextTask;
var timeout = setTimeout(hello, 5000);

<button onclick="hello()">Click me to start</button>