Writing a setTimeout recursive loop in Coffeescript

Question

I am working on a streaming video streaming application. In fact, users will upload photos to a folder on my server via FTP, and the page should be updated at any time when a new photo is added without updating.

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

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

function refreshLoop(currentFolderState, refreshRate) { // Get the new folder state $.get("../ajax/getFolderState.php", function(data) { // If it different than the current state if ( data !== currentFolderState ) { // Do something } // If it 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 use Coffeescript in this project, trying to find out how it works, since many developers seem to like it, but I can’t figure out how to replicate this functionality without using the named functions, Can someone point me in the right direction or explain is the best way for me to achieve this effect that can be easily done in coffeescript?

Answer 1

You can do something similar 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, you could embed it all like this:

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

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

Embedding all of this will probably be a little ugly and confusing in your case, although using a separate refresh_loop = (data, refresh_rate) -> ... probably the best idea.

Answer 2

Shorter version

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

which compiles to

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

Answer 3

I do not see any problem here. All you have to do is set the refreshLoop variable to a variable. Here is a direct translation of your CoffeeScript code:

  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 

Answer 4

but I cannot figure out how to replicate this functionality without using the named functions.

You can use a self-running anonymous function as follows:

 (function(){ // do your stuff setTimeout(function(){ arguments.callee(); }, time); })(); 

Here arguments.callee refers to an anonymous function.

Note that arguments.callee deprecated in ES5, there is nothing wrong with using a named function.