[Solved-5 Solutions] How can we pass a parameter to a setTimeout() callback ? - javascript Tutorial
Problem:
In JavaScript code should be like:
function statechangedPostQuestion()
{
//alert("statechangedPostQuestion");
if (xmlhttp.readyState==4)
{
var topicId = xmlhttp.responseText;
setTimeout("postinsql(topicId)",4000);
}
}
function postinsql(topicId)
{
//alert(topicId);
}
An error will occurs on topicId is not defined. This code is working before using this setTimeout()function. After some time we call postinsql (topicId) fuction.
How to Solve this Problem ?
Solution 1:
In this example, we also output the parameters that were passed to the alertFunc() function. This does not work in IE9 and earlier version.
<!DOCTYPE html>
<html>
<body>
<p>Click the Start button to output "Wikitechy" after 2 seconds.</p>
<button onclick="myStartFunction()">Start</button>
<p id="demo"></p>
<p id="demo2" style="color:red;"></p>
<script>
var myVar;
function myStartFunction() {
myVar = setTimeout(alertFunc, 2000, "First param", "Second param");
}
function alertFunc(param1, param2) {
document.getElementById("demo").innerHTML += "Wikitechy ";
document.getElementById("demo2").innerHTML = "Parameters passed to alertFunc(): <br>"
+ param1 + "<br>" + param2 + "<br>";
}
</script>
</body>
</html>
Solution 2:
The "setTimeout" receives a third parameter that is sent as parameter to the internal function at the end of the timer.
var hello = "Hello World";
setTimeout(alert, 1000, hello);
Read Also
setTimeout or setintervalSolution 3:
This solution we have some research and testing, they given an implementation:
setTimeout(yourFunctionReference, 4000, param1, param2, paramN);
setTimeout will pass all extra parameters to your function so they can be processed. The anonymous function can be work. We want to use "this", within instance of a object that function will not be work. Any anonymous function will change "this" to point to window, so we will lose your object reference.
Solution 4:
_.delay = function(func, wait) {
var args = slice.call(arguments, 2);
return setTimeout(function(){ return func.apply(null, args); }, wait);
};
We can pass as many parameters to the function called by setTimeout.
Solution 5:
Using a setTimeout in a loop.
Use forEach and Object.keys
var testObject = {
prop1: 'test1',
prop2: 'test2',
prop3: 'test3'
};
Object.keys(testObject).forEach(function(propertyName, i) {
setTimeout(function() {
console.log(testObject[propertyName]);
}, i * 1000);
});
Using bind:
var i = 0;
for (var propertyName in testObject) {
setTimeout(function(propertyName) {
console.log(testObject[propertyName]);
}.bind(this, propertyName), i++ * 1000);
}
Here we don't use foreach or bind. Another option to use an IIFE:
var i = 0;
for (var propertyName in testObject) {
setTimeout((function(propertyName) {
return function() {
console.log(testObject[propertyName]);
};
})(propertyName), i++ * 1000);
}
We don't consider as IE < 10, then we can use like this:
var i = 0;
for (var propertyName in testObject) {
setTimeout(function(propertyName) {
console.log(testObject[propertyName]);
}, i++ * 1000, propertyName);
}
Block scoped variable to be used:
let i = 0;
for (let propertyName in testObject) {
setTimeout(() => console.log(testObject[propertyName]), i++ * 1000);
}