如何在CoffeeScript中进行回调

Question

I have this little bit of code mixed in with node.js and it allows me to create an unordered list of the directory. What I want is for the parent looping function to pause and wait for the child loop to finish and then continue with the code.

This is my code:

listFolders = (dir, callback) ->
  readDir = "#{__dirname}/public/#{dir}"
  fs.readdir readDir, (err, files) ->
  files.forEach (file) ->
    dirname = file
    path = "#{dir}/#{file}"
    readPath = "#{readDir}/#{file}"

    fs.stat readPath, (err, stat) ->
      if stat && stat.isDirectory()
        console.log "<li class='folder' data-path='#{dir}' data-name='#{dir}/#{dirname}'><span>#{dirname}</span><ul>"
        listFolders path, () ->
          console.log "</ul></li>"
      else if stat && stat.isFile()
        console.log "<li class='file' data-path='#{dir}' data-filename='#{dirname}'><span>#{dirname}</span></li>"

  return callback

As you can see, I have tried to give the function a callback but when I use it

listFolders path, () ->
  console.log "</ul></li>"

the console log is never run, nor did it pause my code.

My output of the folder I am scanning is

<li class='file' data-path='/user_projects/1' data-filename='.DS_Store'><span>.DS_Store</span></li>
<li class='folder' data-path='/user_projects/1' data-name='/user_projects/1/assets'><span>assets</span><ul>
<li class='file' data-path='/user_projects/1' data-filename='index.html'><span>index.html</span></li>
<li class='folder' data-path='/user_projects/1/assets' data-name='/user_projects/1/assets/css'><span>css</span><ul>
<li class='file' data-path='/user_projects/1/assets' data-filename='test.php'><span>test.php</span></li>
<li class='file' data-path='/user_projects/1/assets/css' data-filename='main.css'><span>main.css</span></li>

and it should be

<li class='file' data-path='/user_projects/1' data-filename='.DS_Store'><span>.DS_Store</span></li>
<li class='folder' data-path='/user_projects/1' data-name='/user_projects/1/assets'><span>assets</span><ul>
    <li class='folder' data-path='/user_projects/1/assets' data-name='/user_projects/1/assets/css'><span>css</span><ul>
       <li class='file' data-path='/user_projects/1/assets' data-filename='test.php'><span>test.php</span></li>
       <li class='file' data-path='/user_projects/1/assets/css' data-filename='main.css'><span>main.css</span></li>
    </ul></li>
</ul></li>
<li class='file' data-path='/user_projects/1' data-filename='index.html'><span>index.html</span></li>

I've been suffering with this problem for a while now and would like someone to help me out. Your help will be very much appreciated.

>>>>>>UPDATE USING forEachSeries<<<<<<<

I am now using the code provided below

listFolders = (dir, callback) ->
  readDir = "#{__dirname}/public/#{dir}"
  fs.readdir readDir, (err, files) ->
    async.forEachSeries files, (file, callback) ->
      dirname = file
      path = "#{dir}/#{file}"
      readPath = "#{readDir}/#{file}"

      fs.stat readPath, (err, stat) ->
        if stat && stat.isDirectory()
          console.log "<li class='folder'><span>#{dirname}</span><ul>"
          listFolders path, () ->
            console.log "</ul></li>"
            callback()
        else if stat && stat.isFile()
          console.log "<li class='file'><span>#{dirname}</span></li>"
          callback()
  , callback

and my output is not ant I'd like but instead this (closing 'ul' and 'li' not showing):

<li class='file' data-path='/user_projects/1' data-filename='.DS_Store'><span>.DS_Store</span></li>
<li class='folder'><span>assets</span><ul>
    <li class='folder'><span>css</span><ul>
        <li class='file'><span>main.css</span></li>

my folders in the directory are and should be displayed like

- .ds_store
- asstets
  - css
    - main.css
  - test.php
- index.html

Answer 1

You're passing in a function callback , but you're never calling it. You're just returning it. You may want to look into something like async.js . Then you would write code that looks something like:

listFolders = (dir, callback) ->
  readDir = "#{__dirname}/public/#{dir}"
  fs.readdir readDir, (err, files) ->
    async.forEachSeries files, (file, callback) ->
      dirname = file
      path = "#{dir}/#{file}"
      readPath = "#{readDir}/#{file}"

      fs.stat readPath, (err, stat) ->
        if stat && stat.isDirectory()
          console.log "<li class='folder' data-path='#{dir}' data-name='#{dir}/#{dirname}'><span>#{dirname}</span><ul>"
          listFolders path, () ->
            console.log "</ul></li>"
            callback()
        else if stat && stat.isFile()
          console.log "<li class='file' data-path='#{dir}' data-filename='#{dirname}'><span>#{dirname}</span></li>"
          callback()
  , callback