为什么事件被多次触发？

Question

I'm trying to add an event handler for an audio Javascript plugin using the SoundManager2. This is the function that plays a song and wait for the end of the song to execute the function again:

    function songPlay (newSrc) {

            htmlSound.src = newSrc;
            htmlSound.load();

            thisPlayer.find( ".total-position-scrubber" ).bind( "slide", function(event, ui) {
                htmlSound.currentTime = ui.value;
            });

            var currentArtist = currentRow.find(".total-artist").text();
            var currentTitle =  currentRow.find(".total-title").text();

            thisPlayer.find(".total-playing-artist").html(currentArtist);
            thisPlayer.find(".total-playing-title").html(currentTitle);

            htmlSound.addEventListener("timeupdate", function() {
                var newVolume = thisPlayer.find( ".total-volume-slider" ).slider("option", "value");
                htmlSound.volume = newVolume;

                var duration = htmlSound.duration * 1000;
                var durationTime = convertMilliseconds(duration, "mm:ss");
                thisPlayer.find(".total-song-duration").html(durationTime.clock );

                var position = htmlSound.currentTime * 1000;
                var positionTime = convertMilliseconds(position, "mm:ss");
                thisPlayer.find(".total-song-position").html(positionTime.clock );

                thisPlayer.find( ".total-position-scrubber" ).slider("option", "max", duration/1000);
                thisPlayer.find( ".total-position-scrubber" ).slider("option", "value", position/1000);

            });

            htmlSound.addEventListener("ended", function() {

                        // Find next checked song

                        currentRow = currentRow.nextAll(".can-play:first");

                        // If checked song exists after current song, load it
                        if(currentRow.length > 0)
                        {
                            var newSrc = currentRow.find("[src]").attr("src");
                            songPlay(newSrc);
                        }

                        else
                        {
                            // If no checked song exists after current song, load the first checked song in playlist
                            if(thisPlayer.find(".can-play").length > 0)
                            {
                                currentRow = thisPlayer.find(".can-play:first");
                                var newSrc = currentRow.find("[src]").attr("src");
                                songPlay(newSrc);
                            }
                            // Change pause button to play button
                            else
                            {
                                thisPlayer.find(".total-play").removeClass("total-pause");  
                            }

                        }
                        // If song is playing while next button is clicked play next song
                        if(thisPlayer.find(".total-pause").length > 0)
                        {
                            htmlSound.play();

                        }

            });

            thisPlayer.find(".total-row .total-not-playing").removeClass("total-playing");
            currentRow.find(".total-not-playing").addClass("total-playing");
        }

The only problem is that the "ended" event is triggered more than once every time that a song finishes. After the "ended" event, the function is executed, and then the songPlay() function is executed again (this is the expected behavior), but then, the "ended" event is triggered again, before the song is finished, while it should wait for the end of the song. Any idea of the cause of that behavior?

The newSrc variable has always the right value.

This is the "ended" event definition in SoundManager2:

_html5_events = {

  // HTML5 event-name-to-handler map
  ...
  ended: _html5_event(function() {

  var t = this._t;

  _s._wD(_h5+'ended: '+t.sID);
  t._onfinish();

 }),
 ...
}

Edit:

Surprisingly, it worked just replacing the anonymous function with a declared function like this:

function eventListenerFunction() {

        // Find next checked song

        currentRow = currentRow.nextAll(".can-play:first");

        // If checked song exists after current song, load it
        if(currentRow.length > 0)
        {
            var newSrc = currentRow.find("[src]").attr("src");
            songPlay(newSrc);
        }

        else
        {
            // If no checked song exists after current song, load the first checked song in playlist
            if(thisPlayer.find(".can-play").length > 0)
            {
                currentRow = thisPlayer.find(".can-play:first");
                var newSrc = currentRow.find("[src]").attr("src");
                songPlay(newSrc);
            }
            // Change pause button to play button
            else
            {
                    thisPlayer.find(".total-play").removeClass("total-pause");  
            }

        }
        // If song is playing while next button is clicked play next song
        if(thisPlayer.find(".total-pause").length > 0)
        {
            htmlSound.play();

        }

});

function songPlay (newSrc) {

    htmlSound.src = newSrc;
    htmlSound.load();

    thisPlayer.find( ".total-position-scrubber" ).bind( "slide", function(event, ui) {
        htmlSound.currentTime = ui.value;
    });

    var currentArtist = currentRow.find(".total-artist").text();
    var currentTitle =  currentRow.find(".total-title").text();

    thisPlayer.find(".total-playing-artist").html(currentArtist);
    thisPlayer.find(".total-playing-title").html(currentTitle);

    htmlSound.addEventListener("timeupdate", function() {
        var newVolume = thisPlayer.find( ".total-volume-slider" ).slider("option", "value");
        htmlSound.volume = newVolume;

        var duration = htmlSound.duration * 1000;
        var durationTime = convertMilliseconds(duration, "mm:ss");
            thisPlayer.find(".total-song-duration").html(durationTime.clock );

        var position = htmlSound.currentTime * 1000;
        var positionTime = convertMilliseconds(position, "mm:ss");
        thisPlayer.find(".total-song-position").html(positionTime.clock );

        thisPlayer.find( ".total-position-scrubber" ).slider("option", "max", duration/1000);
        thisPlayer.find( ".total-position-scrubber" ).slider("option", "value", position/1000);

    });

    htmlSound.addEventListener("ended", eventListenerFunction)

    thisPlayer.find(".total-row .total-not-playing").removeClass("total-playing");
    currentRow.find(".total-not-playing").addClass("total-playing");
}

However, I guess I should use $('body').off("ended") after the triggered function to remove the event listener, as @Fallenreaper has suggested.

Answer 1

you call songplay inside of a listener, which applies it another time.... and another time and another time.

recursion.

>_>