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

Answer 1

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);