卡在多次点击事件中

Question

我坚持以下。我有一个播放按钮。当用户第一次点击它时，它应该播放歌曲并为其添加一个暂停按钮。第二次单击该按钮时，它应该暂停歌曲。

想到这个：

$('.play').click(function(event) {
        event.preventDefault();

        var trackID = $(this).closest('li').attr('data-id');
        console.log(trackID);

        $('#playlist li').removeClass('active');
        $(this).parent().addClass('active'); 


        if ( $(this).hasClass('play pause') ) {
            console.log('false');
            $(this).removeClass('pause');
        } else {
            console.log('true');
            $(this).addClass('pause');
            //return false;
        }

        if (nowPlaying) {
            nowPlaying.stop();
        }


        SC.stream('/tracks/' + trackID, function(sound) {
            if ( !$(this).hasClass('play pause') ) {
                console.log('hellooo');
                sound.play();
                nowPlaying = sound;
            } else {
                console.log('byeee');
                sound.pause();
                nowPlaying = sound;
            }
        });

   });

以上部分将正确运行。播放是按钮的默认值。当单击 console.log 时，向我发送 trackID：91298058、true 和流函数中的字符串 hellooo，歌曲正在播放。第二次它还会给我 trackID 91298058、false 和字符串 hellooo。所以错误就在这里。每当您单击字符串 hellooo 时，都会将其发送到 console.log。 console.log - byeee 永远不会发送，因此永远不会暂停。

简而言之，我想要一个按钮，可以从播放切换到暂停和倒退。在播放时它应该播放歌曲：sound.play(); 并且在暂停时它应该暂停歌曲：sound.pause();;

Live demo

有谁知道如何解决这个问题？

Answer 1

在传递给SC.stream的回调函数中，$(this)被重新定义。

应该缓存在点击事件附带的函数中，之后再使用。

$('.play').click(function(event) {
    event.preventDefault();

    var button = $(this);

    // the code

    SC.stream('/tracks/' + trackID, function(sound) {
        if ( button.hasClass('play pause') ) {
            console.log('hellooo');
            sound.play();
            nowPlaying = sound;
        } else {
            console.log('byeee');
            sound.pause();
            nowPlaying = sound;
        }
    });

此外，您可以只检查是否存在 class pause，而不是 play pause。

Answer 2

你能试着评论这一行吗？

            SC.stream('/tracks/' + trackID, function(sound) {
                if ( !$(this).hasClass('play pause') ) {
                    console.log('hellooo');
                    sound.play();
                    nowPlaying = sound;
                } else {
                    console.log('byeee');
                    sound.pause();
                    // nowPlaying = sound;
                }
            });

Answer 3

我想出了以下解决方法：在 click 函数中创建一个布尔值并将其命名为 bool。默认值为 false;。

它与@Colin Delhalle 的上述代码非常相似。

$('.play').click(function(event) {
        event.preventDefault();

        var trackID = $(this).closest('li').attr('data-id');
        console.log(trackID);

        $('#playlist li').removeClass('active');
        $(this).closest('li').addClass('active'); 

        var bool = false;

        if ( $(this).hasClass('play pause') ) {
            console.log('false');
            bool = false;
            $(this).removeClass('pause');
        } else {
            console.log('true');
            $('#playlist li a').removeClass('pause');
            $(this).addClass('pause');
            bool = true;
        }

        if (nowPlaying) {
            nowPlaying.stop();
        }

        SC.stream('/tracks/' + trackID, function(sound) {
            if (bool) {
                console.log('play');
                sound.play();
                nowPlaying = sound;
            } else {
                console.log('pause');
                sound.pause();
                nowPlaying = sound;
            }
        });

    });

唯一我觉得很奇怪的地方就是pause函数不是暂停，而是停止..有谁知道为什么吗？

卡在多次点击事件中

Stuck with multi click event

javascript

jquery

soundcloud