时间戳

首页 > 解决方案 > 如何以延迟方式调用函数

javascript - 如何以延迟方式调用函数

问题描述

我有一个文本框，每当用户输入内容时，我都想更新 span 的内容。但是，我确实想在更新跨度之前等待一段时间。我尝试使用 setTimeout 甚至 setInterval 但它似乎不起作用。

这是我的html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Title</title>
</head>
<body>
<input type="text" id="text-box-1" />
<span id="results"></span>
</body>
</html>

还有我的 JS：

function update(textValue){
    document.querySelector("#results").innerHTML = textValue;
}

document.querySelector("#text-box-1").onkeyup = function(e){
    setInterval(update(document.querySelector("#text-box-1").value), 5000);
}

当我在文本框中输入时，它开始显示在跨度内，而不是等待 5 秒。我在这里想念什么？

谢谢。

标签： javascript

解决方案

setInterval() 函数有两个参数，一个函数和一个超时值。你给了它一个语句，它立即被执行，然后 setInterval() 函数在 5 秒内什么都不做，因为它没有被赋予一个真正的函数来执行。

只需将语句包装在匿名函数中即可获得所需的结果。:)

document.querySelector("#text-box-1").onkeyup = function(e){
    setInterval(function(){update(document.querySelector("#text-box-1").value)}, 5000);
}

希望这有帮助！

推荐阅读