Geek Answers Handbook

Why does this function not work using Coffeescript?

Now I move on to writing all javascript code with Coffeescript, but I'm upset because the simplest example is causing me problems. At the moment, I have spent more than an hour of research, not being able to find the answer to this question ...

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> <link href="sheet.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/coffeescript"> $ -> sayHi() sayHi = -> alert 'Hi there!' </script> </head> <body> <div id="all"> </div> </body> </html>

As you can see from the above code, I'm just trying to make a call to the sayHi () function from the jQuery built-in handler. But the error I get is the following:

Uncaught TypeError: undefined is not a function

Please help me. According to the compiler and the tutorials I read, this “should” work, but I don't know what I'm doing. It is terribly wrong to not run for this :(

+7
source share
2 answers
Tags

text/coffeescript have a key difference from text/javascript tags. They do not start until the document is loaded. This is because the coffee script library must find all the coffee script tags and compile them, and it must wait until the DOM is ready so that it can find all of them.

Another problem is that jQuery immediately starts the DOM callback if this event has already occurred. And in this case he has.

So, when this compiled in JS, you will get the following:

 var sayHi; $(function() { return sayHi(); }); sayHi = function() { return alert('Hi there!'); };

So what happens:

  • declare a sayHi variable without a value, making it undefined .
  • Create a DOM callback for jQuery that uses this variable.
  • jQuery starts the callback function right away, since the DOM is ready already.
  • The callback function executes and tries to run sayHi() , which is still undefined.
  • After the callback is completed, sayHi installed on the function you want to run.

Now, if it was a regular JS tag, it could be launched before the document was loaded, and then it would work fine, because after a while the callback was actually sayHi , then sayHi would be assigned properly.

To fix this, you must assign a function BEFORE you start the pass in the callback. Or you can skip executing $(->) completely since you already know that the DOM is ready. But actually, this is one of the main reasons you really shouldn't use coffeescript tags. This is really not the same as using the JS tag. And one of the many reasons for this is not the recommended approach to using CoffeeScript on a real site.

Compile your coffee script before your browser sees it as a responsible developer :)

+11
source

Turn over statements. CoffeeScript seems to have the same limitations as the good old C, where you cannot make a function / method call until it is defined in the order of your code.

Therefore use

 <script type="text/coffeescript"> sayHi = -> alert 'Hi there!' $ -> sayHi() </script>
+4
source

More articles:


All Articles