Reference Error when calling function inside setTimeout

Question

I keep getting a Reference Error inside the setTimeout function.
Below is the code in javascript file

( function( $, undefined ) {

  $( document ).ready( init );

  function init() {
    registerEventListeners();
  }

  function registerEventListeners() {
    $( '.start_countdown').click( handleStart );
    $( '.end_countdown').click( handleEnd );
  }

  var countdown;
  var countdown_number;

  function handleStart() {
    countdown_number = 11;
    countdown_trigger(countdown_number);
  }

  function countdown_trigger() {
    if (countdown_number > 0) {
      countdown_number --;
      document.getElementById('countdown_text').innerHTML = countdown_number;
      if (countdown_number > 0) {
          countdown = setTimeout('countdown_trigger()', 1000);
      }
    }
  }

  function handleEnd() {
    clearTimeout(countdown);
  }

})( jQuery );

In the jade.js file:

extends layout

append scripts
  script(src='/javascripts/countDownRedirect.js')

block content
  h1= title

  p Redirecting you to your documents shortly

  div
    button.start_countdown#start Start Countdown
    button.end_countdown#end End Countdown

  div#countdown_text Placeholding text

Reference Error: 'countdown_trigger()' not defined

When the page is loaded everything appears to work fine.
Clicking the start button displays 10 but then throws the reference error. Any suggestions?
Thanks

elclanrs · Accepted Answer · 2012-09-05 02:24:18Z

3

When you use quotes in setTimeout you're invoking eval which is not a good idea. Try passing a reference to the function instead of a string:

countdown = setTimeout(countdown_trigger, 1000);

answered Sep 5, 2012 at 2:24

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

Comments

jfriend00 · Accepted Answer · 2012-09-05 02:33:36Z

1

To explain what's going on and why it doesn't work - when you pass a string to setTimeout(), the string is evaluated by eval() in the global scope. That means that no local functions or variables are available in that global scope. Since your countdown_trigger() function is declared inside another function, it is not in the global scope and thus won't be available to eval() and thus it doesn't work when you pass it to setTimeout().

This is one of many reasons to never pass strings to setTimeout().

Instead pass a real function reference which is evaluated in your current scope like this:

setTimeout(countdown_trigger, 1000);

answered Sep 5, 2012 at 2:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Collectives™ on Stack Overflow

Reference Error when calling function inside setTimeout

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related