How to call a function in a delayed manner

Question

I have a text box and whenever the user types something, I want to update the contents of a span. However, I do want to wait for sometime before I update the span. I tried using setTimeout and even setInterval but it doesn't seem to work.

Here is my 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>

And my 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);
}

When I type in the textbox it starts showing up inside the span instead of waiting for 5 secs. What am I missing here?

Thanks.

Possible duplicate of [How to delay calling of javascript function?](https://stackoverflow.com/questions/5570017/how-to-delay-calling-of-javascript-function) — Chris, Aug 01 '19 at 00:31

score 1 · Accepted Answer · answered Jul 31 '19 at 22:23

1

You need to wrap your call to your update function in setTimeout within a function.

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

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

<input type="text" id="text-box-1" />
<span id="results"></span>

answered Jul 31 '19 at 22:23

j08691

204,283
31
260
272

Oh my god. Why do I need to wrap it in function if I am calling a function? Ah. That's so confusing. I was looking at W3Schools and it had setInterval(function, milliseconds, param1, param2, ...), where "function" is the function that will be executed. So, I just used the function name there. Didn't realise I need to wrap it in a "function(){}" Ah...that's so unintuitive. – Blueboye Jul 31 '19 at 22:31
@Blueboye But you aren't "just using the function name", you're outright *calling* the function and passing its return value to `setTimeout` - in this situation, the browser is calling the function immediately and passing nothing to `setTimeout`. – Niet the Dark Absol Jul 31 '19 at 22:36
@NiettheDarkAbsol I am not sure if I follow this. I provided the function to be executed "update" and added the parameters to the function that it requires. This is why it executed it right away? How can I make this work if I need to send parameters? Just wrapping it within a function(){}? Where can I read more about how this works conceptually? – Blueboye Jul 31 '19 at 22:46
`setTimeout(update, 5000, document.querySelector('#text-box-1').value);` would do it, as it passes the argument to the function. – Niet the Dark Absol Aug 01 '19 at 01:08

score 1 · Answer 2 · answered Jul 31 '19 at 22:34

The setInterval() function takes two arguments, a function and a value for timeout. You have given it a statement, which is getting executed immediately and then the setInterval() function does nothing for 5 seconds, because it has not been given a true function to execute.

Simply wrap the statement in an anonymous function to get your desired result. :)

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

Hope this helped!

How to call a function in a delayed manner

2 Answers2