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?

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?

• javascript
• jquery
• coffeescript

4 Answers 4

A more succinct version

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

which piles to

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

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/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/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.

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

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.