Question

I have this Javascript function:

function Card(term, def, terms, curTerm) {
    this.term = term;
    this.def = def;
    this.terms = terms;
    this.curTerm = curTerm;

    this.show = function() {
        that = this;
        var html = createCard(that.term, that.def);
        $('body').append(html);
        $('input[type=text]').focus();
        $('.answer').on('click', function(event) {
            event.preventDefault();
            answer = $(this).parent().serializeArray()[0].value;

            // answer correct
            if (that.term === answer) {
                $('.card').addClass('correct');
                $('form').replaceWith('<h2>Correct! ' + that.term + '</h2>');
                setTimeout(function () {that.destroy(terms, curTerm + 1);}, 1500);

            // answer incorrect
            } else {
                $('.card').addClass('incorrect');
                $('form').replaceWith('<h2>Incorrect! ' + that.term + '</h2>');
                setTimeout(function () {that.destroy(terms, curTerm);}, 1500);
            }
        });
    };

The line I am having issues with is setTimeout(function () {that.destroy(terms, curTerm + 1);}, 1500);. Originally I had setTimeout(that.destroy(terms, curTerm + 1), 1500);, but it didn’t set the timeout it just called that.destroy. Why does it not call it immediately when put in the anonymous function? Does this have anything to do with closures? because it seems like I am having to create a closure, but I haven’t figured out enough about them to know for sure.

Any thoughts would be appreciated.

Answer 1

In your first setTimeout() call, this:

that.destroy(terms, curTerm + 1)

is a function call expression. It’s evaluated in order to build the set of parameter values to call setTimeout().

When you wrap it in an anonymous function, that (anonymous) function is not called, because you don’t suffix it with the function call operator — the parenthesized list of parameters.

Thus: an expression of the form

something ( p1, p2, ... pn )

means to invoke the function referenced by “something” after evaluating each of the parameters in the argument list, and then use that value as the larger expression context proceeds. It always means that in JavaScript. There’s no syntax to say “here’s the function I want you to call later, and some parameters to pass”. (There’s a function to do that now — .bind() on the Function prototype — but no special syntax.)