20700

Multiple Callbacks in CoffeeScript

Question:

I am trying to work out the correct behavior to string multiple callbacks together.

class Person move_head: -> head.animate({ left: x, },{ complete: @move_foot, }); move_foot: -> foot.animate({ left: x, },{ complete: @move_arm, }); move_arm: -> arm.animate({ left: x, },{ complete: something_else, });

Now the issue is, head animates fine which calls foot. Foot also animates fine. The problem is that when foot is done, it does not animate the arm. I can't figure out what the problem could be. I have a guess though that it might have to do with a scoping issue.

Answer1:

Use the fat arrow =>, to bind this to current context:

move_head: => // ... move_foot: => // ... move_arm: => // ...

<strong>UPDATE:</strong> Here's a short explanation:

One of the biggest gotchas in javascript is this. In a method (such as your move_head), this is your instance of Person, if you call it as new Person().move_head(). But it doesn't have to be. For instance, if you call it using new Person().move_head.call(null), this will be null.

But the biggest gotcha is that when you are inside a function, like a complete callback to a jQuery animate call, this is no longer bound to your object! It is probably bound to window, but not for certain. So what happens in your case is that you give jQuery a reference to @move_foot (or really, this.move_foot). This call seems to work, in that your animation completes. But when jQuery calls that function, it will no longer know that this is supposed to be your Person. So when you tell it to then go to @move_arm, it will look for a method move_arm on some other object (perhaps window).

A common way to solve this is to save a reference to this before you make the call, like var self = this, and then, inside the callback, refer to that bound variable self instead.

You could use this technique, there is nothing wrong with it. Something like:

move_head: -> self = this head.animate(..., complete: self.move_foot)

But CS does this (binding of this) for you, by giving you the fat arrow: =>.

The fat arrow says: "Everything inside this method referring to this, shall refer to this object."

Recommend

  • how to set column classes for different screen sizes using bootstrap
  • How to add td rowspans to a table?
  • CoreBluetooth on Mac Command line application
  • Regex (JavaScript): match feet and/or inches
  • iOS9 Gamecenter error “plugin com.apple.GameCenterUI.GameCenterMatchmakerExtension invalidated”
  • Detecting malware-added advertisements on my site
  • How to create additional TaskExecutor beside TaskExecutionAutoConfiguration?
  • Was default_marker removed from mapbox-gl.js
  • Storyboard iOS MBProgressHUD
  • How to add CKEditor RTE to typo3 Backend Module with the API?
  • How do I detect if an email client is configured on an Android device?
  • watir webdriver - window not found
  • Auto send email based on the time and email address in database
  • How can I filter an array of dictionaries in 'updateSearchResultsForSearchController' to s
  • Admob in ListView not clickable
  • Unable to start a WebView from an AsyncTask
  • playing mp3 from nsbundle
  • Facebook Error (#200) The user hasn't authorized the application to perform this action (PHP)
  • How to use AJAX to upload large CSV file? [closed]
  • How to load dynamic images in custom ListView
  • What is the difference between dynamically creating a script tag and statically embed a script tag?
  • time column in sqlite using gorm
  • Problems using phonegap / cordova file plugin part 2 - synchronicity
  • VS2010 RDLC C#. How can I set a LocalReport object to a ReportViewer?
  • How to make 100% div height between header and footer?
  • Terminal run dalvikvm with am.jar
  • How do I add a mouse over tooltip to an Image using .DrawImage()
  • Update cell query for Excel ADO from Delphi
  • Angular FormGroup won't update it's value immediately after patchValue or setValue
  • How to mutate multiple variables without repeating codes?
  • ARKit code issue {unknown error -1=ffffffffffffffff error: Task failed with exit 1}