在将函数作为参数传递时使用字符串

Question

The following script (courtesy of Adam Khoury ) creates a timer which gives a message upon completion. The functionality makes sense to me, but I am struggling to understand the use of strings here. Particularly:

1) Why must 'countDown('+secs+',"'+elem+'")' be passed as a string? In other examples I have seen, setTimeout can accept a function (without 'quotes').

2) Likewise, in that same line, why must elem be passed as a string (using "quotes")? It seems that the elem variable already holds a string value, the name of the id ( "status" )

If you have any light to shed on this, or misconceptions to correct, I'll be grateful!

<script type="text/javascript">
function countDown(secs,elem) {
var element = document.getElementById(elem);
element.innerHTML = "Please wait for "+secs+" seconds";
if(secs < 1) {
clearTimeout(timer);
element.innerHTML = '<h2>Countdown Complete!</h2>';

}
secs--;
var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
}
</script>
<div id="status"></div>
<script type="text/javascript">countDown(10,"status");</script>

Answer 1

Why must 'countDown('+secs+',"'+elem+'")' be passed as a string?

It doesn't have to be passed like that. Although setTimeout accepts a string, you should avoid passing a string. You will see its limitations quickly when you somehow try to call the callback function with an object. Passing a function is a much better approach.

Likewise, in that same line, why must elem be passed as a string (using "quotes")? It seems that the elem variable already holds a string value, the name of the id ("status")

That's right, elem is already a string, but if you omit the quotes, you will create a string such as

'countDown(10, status)'

If setTimeout is evaluating the string later on, it will try to access for a variable status , which does not exist. That's why you want to the final string to look like

'countDown(10, "status")'

and for that you have to add the quotation marks.

---

So, a cleaner implementation would be

var timer = setTimeout(function() {
    countDown(secs, elem);
}, 1000);

Note that the code is actually not working correctly. The timer variable is wrongly scoped, doesn't have any effect and setTimeout will still be called even if secs < 1 .

It should probably be like this:

function countDown(secs,elem) {
    var element = document.getElementById(elem);
    if(secs < 1) {
        element.innerHTML = '<h2>Countdown Complete!</h2>';
        return;
    }
    else {
         element.innerHTML = "Please wait for "+secs+" seconds";
    }
    setTimeout(function() {
        countDown(secs - 1, elem);
    }, 1000);
}

Answer 2

best practice

setTimeout(function(){

countDown(secs,elem);

},3000)