Writing a recursive setTimeout loop in Coffeescript

Question

I'm working on a live photo stream app. Essentially, users will be uploading photos to a folder on my server via FTP, and the page should update anytime a new photo is added without refreshing.

I plan to do this with AJAX and the method suggested in this thread: How to check if directory contents has changed with PHP?. Essentially, I want to have a loop on my page that every X seconds, makes an AJAX call to a PHP page which gives back the MD5 hash of the directory listing for the uploads folder. If the hash has changed since the last call, another AJAX call will get the most recently added file and jQuery will display it on the page.

In vanilla Javascript/jQuery, this can be done using a recursive, named function with a setTimeout inside of it. This code is working for me:

function refreshLoop(currentFolderState, refreshRate) {
    // Get the new folder state
    $.get("../ajax/getFolderState.php", function(data) {
        // If it's different than the current state
        if ( data !== currentFolderState ) {
            // Do something
        }
        // If it's the same as the current state
        else {
            // Do nothing
        }
        // After the refresh rate, try again
        setTimeout(function() {
            refreshLoop(data, refreshRate);
        }, refreshRate);
    });
}

// Document Ready
$(function() {

    var refreshRate = 5000;

    // After refresh rate has passed
    setTimeout(function() {
        // Get the starting folder state
        $.get("../ajax/getFolderState.php", function(data) {
            // Kick off the loop
            refreshLoop(data, refreshRate);
        });
    }, refreshRate);

});

I'm using Coffeescript on this project in an attempt to learn how it works, since a lot of developers seem to be fond of it, but I can't figure out how to replicate this functionality without the use of named functions. Can someone either point me in the right direction or explain a better way for me to achieve this effect that can be easily done in Coffeescript?

kasperlanger · Accepted Answer · 2013-08-13 08:18:22Z

6

A more succinct version

do poll = ->
  #do work here
  setTimeout poll, 1000

which compiles to

var poll;
(poll = function() {
  //do work here
  return setTimeout(poll, 1000);
})();

answered Aug 13, 2013 at 8:18

kasperlanger

611 silver badge3 bronze badges

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

1 Comment

Chris Marisic Over a year ago

FWIW this method seems to only be compatible with -> and => requires much more elaborate setup for context wrangling

mu is too short · Accepted Answer · 2012-03-08 20:45:48Z

4

You could do something like this in CoffeeScript:

refresh_loop = (data, refresh_rate) ->
    #...etc

refresh_rate = 5000
setTimeout((->
    $.get("../ajax/getFolderState.php", (data) ->
        refresh_loop(data, refresh_rate)
), refresh_rate)

Demo: http://jsfiddle.net/ambiguous/ZVTcg/

If your function was smaller then you could inline all of it like this:

refresh_rate = 5000
setTimeout(f = (->
    // real work goes here...
    setTimeout(f, refresh_rate)
), refresh_rate)

Demo: http://jsfiddle.net/ambiguous/XThV6/

Inlining all of it would probably be a bit ugly and confusing in your case though so using a separate refresh_loop = (data, refresh_rate) -> ... construct is probably a better idea.

edited Mar 8, 2012 at 20:45

answered Mar 8, 2012 at 20:39

mu is too short

436k71 gold badges863 silver badges822 bronze badges

3 Comments

Ryan Giglio Over a year ago

I could have sworn I tried doing that at some point and it didn't work, but I guess I had something else fouled up also. Thanks!

mu is too short Over a year ago

@Ryan: You probably left out the extra parentheses, the implied block structure of CoffeeScript makes a bit of a mess sometimes.

Chris Marisic Over a year ago

Perfect. The inline function is ready to go. Future readers if you're using any @ references inside the f = function, you likely want to update it to (=> so it properly captures the original scope.

Trevor Burnham · Accepted Answer · 2012-03-08 20:43:49Z

4

I don't see any problem here. All you have to do is assign refreshLoop to a variable. Here's a direct translation of your code to CoffeeScript:

    refreshLoop = (currentFolderState, refreshRate) ->
        $.get '../ajax/getFolderState.php', (date) ->
            # ...
            setTimeout (-> refreshLoop(data, refreshRate)), refreshRate

    $ ->
        refreshRate = 5000
        setTimeout (->
            $.get '../ajax/getFolderState.php', (data) ->
                refreshLoop data, refreshRate
        ), refreshRate

answered Mar 8, 2012 at 20:43

Trevor Burnham

77.5k33 gold badges165 silver badges200 bronze badges

5 Comments

Sandro Over a year ago

I personally like to make an alias of the setTimeout method called delay with the parameter reversed like this: delay = (ms, cb) -> setTimeout(cb, ms) that way I can later call it using: delay refreshRate, -> "do something..." just seems a little nicer without the extra parenthesis. I think I even saw this originally from one of your responses.

Trevor Burnham Over a year ago

@Sandro Yeah, that definitely makes things nicer. I'm just trying to answer the question as directly as possible.

Ryan Giglio Over a year ago

This is exactly what I tried to do initially, I must have had a syntax error in there somewhere that messed me up. Also, that delay alias is a great idea and I think I may use that in the future.

Trevor Burnham Over a year ago

@RyanGiglio Did you try plugging your code into js2coffee.org? It's not perfect, but it's a great starting point.

Ryan Giglio Over a year ago

Wow that looks like a great resource. Will bookmark it. Thanks!

Sarfraz · Accepted Answer · 2012-03-08 20:11:48Z

2

but I can't figure out how to replicate this functionality without the use of named functions.

You can use self-invoking anonymous function like this:

(function(){
   // do your stuff

   setTimeout(function(){
      arguments.callee();
   }, time);
})();

Here arguments.callee refers to anonymous function itself.

Please note that arguments.callee is deprecated in ES5, there is nothing wrong in using named function though.

answered Mar 8, 2012 at 20:11

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

5 Comments

Ryan Giglio Over a year ago

I found a suggestion about arguments.callee elsewhere also, but JSHint gave me a warning about it and I found a lot of suggestions that it was bad to use it in general. What is the potential issue that makes it sound so scary?

Pointy Over a year ago

The arguments.callee construct is deprecated. It also causes performance problems.

Ryan Giglio Over a year ago

Those are scary words to hear.

Sarfraz Over a year ago

@RyanGiglio:See this: stackoverflow.com/questions/103598/…

Ryan Giglio Over a year ago

I see that you can name an inline function in vanilla Javascript (which is something I didn't know, so thank you!) but that still doesn't resolve my issue of accomplishing this in Coffeescript. As far as I know it has no method of naming functions at all, only binding anonymous functions to variables.

Collectives™ on Stack Overflow

Writing a recursive setTimeout loop in Coffeescript

4 Answers 4

1 Comment

3 Comments

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related