0

I have the following code:

function fn($){
  return function(){
    innerFn = function(){
      setTimeout(show, 1000);
    };

    show = function(){
      $.alert("TEST");
    }
  }
}

But, after one second, when the function show is run, it says $ is undefined. How do I resolve this issue?

10
  • 1
    When and how is fn called? (And how is show called?) Commented Jul 22, 2013 at 5:39
  • on page loaded, call fn.like yui module. Commented Jul 22, 2013 at 5:42
  • $ should be available in show if its defined when fn is called. Commented Jul 22, 2013 at 5:42
  • I tried closure, can't do it Commented Jul 22, 2013 at 5:42
  • but it can't.setTimeout context is window, it doesn't has $. Commented Jul 22, 2013 at 5:44

3 Answers 3

2

how to pass arguments to a function in setTimeout

setTimeout has a built in mechanism for adding params

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

use it.

If you're going to use this - you should be careful. but that's another question.

Sign up to request clarification or add additional context in comments.

Comments

1

There are a number of things at play here. The most important being that your setTimeout never gets called, since innerFn never gets called. This should do the trick.

function fn($){
  return function(){
    setTimeout(function(){
      $.alert("TEST");
    }, 1000);
  }
}

fn(window)(); //triggers your alert after 1000ms

2 Comments

I called innerFn in other place, it's just a example.I want to know, like the code above, how to achieve?
In your current example your show function has access to the $ variable, since it is in a "parent" scope. There must be something else going on in your actual code.
1

Your code makes no any sense, because nothing is called:

function fn($){
  return function(){
    innerFn = function(){
      setTimeout(show, 1000);
    };

    show = function(){
      $.alert("TEST");
    }
  }
}

Let's say I'm calling fn passing window, then a function is returned, that I can executed. But because this function is containing only function declaration - you also forget var so you pollute the global scope, that is bad - nothing is happen.

You'll need at least one function call inside, like:

function fn($){
  return function(){
    var innerFn = function(){
      setTimeout(show, 1000);
    };

    var show = function(){
      $.alert("TEST");
    }

    innerFn();
  }
}

fn(window)();

And that will works. However, it's definitely redundant. You can just have:

function fn($){
  return function(){
    function show(){
      $.alert("TEST");
    }

    setTimeout(show, 1000);
  }
}

To obtain the same result. However, if you're goal is just bound an argument to setTimeout, you can use bind. You could use the 3rd parameter of setTimeout as the documentation says, but it seems not supported in IE for legacy reason.

So, an example with bind will looks like:

function show() {
    this.alert('test');
}

setTimeout(show.bind(window), 1000);

Notice also that window is the global object by default, so usually you do not have to do that, just alert is enough. However, I suppose this is not your actual code, but just a mere test, as the alert's string says.

If you prefer having window as first parameter instead, and you're not interested in the context object this, you can do something like:

function show($) {
    $.alert('test');
}

setTimeout(show.bind(null, window), 1000);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.