Question

I am trying to convert the following JS snippet to CoffeeScript:

$(document).ready(function(){
  window.setTimeout(function(){
    $('#flash').slideUp('slow', function(){
      $(this).remove();
    })
  }, 1000)
})

I tried this:

$(document).ready ->
  window.setTimeout ->
    $('#flash').slideUp 'slow', (-> $(this).remove()), 1000

which leads to the following JS code:

(function() {
  $(document).ready(function() {
    return window.setTimeout(function() {
      return $('#flash').slideUp('slow', (function() {
        return $(this).remove();
      }), 1000);
    });
  });
}).call(this);

Looks pretty similar to me, but it simply does not work. The intention of the snippet is, to do a slideUp animation on the a div with the id #flash, and remove the element, when the animation is done. The pure JS Snippet works fine, but I don’t get, why the compiled CS does not do it’s job

I am not very experience with JavaScript or CoffeeScript at all, so I would be very happy vor a hint here.

Answer 1

Your original code is equivalent to the CoffeeScript

$(document).ready ->
  window.setTimeout (->
    $('#flash').slideUp 'slow', (-> $(this).remove())
  ), 1000

Instead, you’ve made 1000 a third argument to the slideUp function. Since setTimeout requires a time argument, nothing happens.

Note that I like to make a wrapper function around setTimeout that swaps the two arguments for readability’s sake:

window.delay = (ms, func) -> setTimeout func, ms

Once that’s defined, you can write

$(document).ready ->
  delay 1000, -> $('#flash').slideUp 'slow', (-> $(this).remove())