Question

Quite stumped on this one.

I am using the Youtube JS API to determine when a song has ended. When it is ended, I want to call a method that plays the next song.

Here is my event listener method (Coffeescript):

window.statechange = (newstate) ->
    debug = true
    if debug then console.log 'Player State Change: ' + newState
    switch newState
        when 0 #song ended
            if debug then console.log 'Song Ended' 
        when 1 #song is playing
            if debug then console.log 'Song Playing'
            #change the title of the page
            document.title = $('#currentSongTitle').html() + ' by ' +
                             $('#currentSongArtist').html()
        when 2 #song is paused
            if debug then console.log 'Song Paused'
        when 3 #song is buffering
            if debug then console.log 'Song Loading'

The method works correctly in this form. When the song ends, FireBug’s console displays Song Ended

However, when I modify the code to add a simulated click that would trigger the next song function, it gives me a too much recursion error and crashes:

when 0 #song ended
        if debug then console.log 'Song Ended'
        $('.next-song').click()

Here is the code for when next-song is clicked:

$(document).on 'click', '.next-song', ->
    console.log 'Next-song clicked'

That’s it. Before it crashes, the console DOES say ‘Next-song clicked’, but then it crashes and gives the too much recursion error. How could a 1 line cause any recursion at all?

Even more confusing is that the following method works with no errors. I created it with the purpose of making sure the simulated click works:

$(document).on 'click', '#debug-next-song', ->
    $('.next-song').click()

EDIT: Found out everything works fine in Chrome but completely crashes in Firefox. You can see the error first hand at (http://t3k.no/beta). On the right where it says current song, clicking ‘Next’ works fine. But if you start playing the song at the bottom of the screen and wait for it to end, the code $('.next-song').click() is called and crashes Firefox.

Answer 1

I’m not really sure why this is happening, but going through the source on your site I noticed you’re actually triggering the click in a return. I don’t see why this wouldn’t work, but if you separate those into two statements, it seems to work for me.

change:

switch (newState) {
      case 0:
        if (debug) console.log('Song Ended');
        return $('.next-song').click();
// ...

to:

switch (newState) {
      case 0:
        if (debug) console.log('Song Ended');
        $('.next-song').click();
        return; 
// ...

Since you’re using CoffeeScript, you can use the return keyword explicitly.

when 0 #song ended
    if debug then console.log 'Song Ended'
    $('.next-song').click()
    return