我的onlick有2个功能-但是我需要一个接一个触发吗？

Question

我不是Js专家，所以我对此有点挣扎！ 我希望我能解释一下。

这在PhoneGap应用程序/ iOS和Android中。

我有一个链接，可播放音频文件：

<span class="play" onclick="loader(); playAudio('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')"  id="t3">

因此，单击2个函数loader()会出现一个“正在加载”图标，并且“ playAudio”会播放一个曲目。

继承人的功能的js：

<script>
    function loader() {
        $(".loading").addClass("loadingnow");
    }
</script>

<script>
    function playAudio(src,trackname) {
        //  alert('trackname:' + trackname);
        if (audioPlaying === false) {
            if (device.platform == 'Android') {
                src = '/android_asset/www/' + src;
            }
            media = new Media(src, success, error_error);
            media.play();
            //add playing class
            document.getElementById(trackname).parentNode.className="playing";
            $(".loading").removeClass("loadingnow");
            audioPlaying = true;
        } else {
            //audio is already playing
        }
    }

    function success() {
        $(".playing").removeClass("playing");
        $(".loading").removeClass("loadingnow");
        audioPlaying = false;
    }

    function error_error(e) {
        //alert('great error');
        //alert(e.message);
    }

    function stopAudio() {
        if (media) {
            media.stop();
            audioPlaying = false;
        }
    }
</script>

音频加载会稍有延迟-这就是为什么我有加载程序图标出现的原因，但在应用程序中，所有发生的都是音频播放-加载程序未出现。 （在playAudio功能中，当播放音频时，它会删除加载程序）

我如何使onlick成为加载程序功能，并确保在执行playAudio功能之前已完成？！？！

真的卡住了！

Answer 1

删除行：

$(".loading").removeClass("loadingnow");

来自playAudio() 。 它只能在success()函数中完成。

Answer 2

不确定这是根本原因，但也许您应该删除下面的注释行：

function playAudio(src,trackname) {
    //  alert('trackname:' + trackname);
    if (audioPlaying === false) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
            }
            media = new Media(src, success, error_error);
            media.play();
            //add playing class
            document.getElementById(trackname).parentNode.className="playing";
           // $(".loading").removeClass("loadingnow");  <------ this line removes immediately the class. The sucess function will do this, once the media is loaded 
            audioPlaying = true;
            } else {
            //audio is already playing
        }
    }

Answer 3

首先，将其放入JS文件-没有人喜欢内联JS。

第二个具有同时触发它们的功能

的HTML

<span class="play" onclick="loadPlay('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')"  id="t3">

JS

<script>
   function loadPlay(src, trackName) {
       loader();
       playAudio(src, trackName);
   }

   function loader() {
        $(".loading").addClass("loadingnow");
    }

    function playAudio(src,trackname) {
        //  alert('trackname:' + trackname);
        if (audioPlaying === false) {
            if (device.platform == 'Android') {
                src = '/android_asset/www/' + src;
            }
            media = new Media(src, success, error_error);
            media.play();
            //add playing class
            document.getElementById(trackname).parentNode.className="playing";
            audioPlaying = true;
        } else {
            //audio is already playing
        }
    }

    function success() {
        $(".playing").removeClass("playing");
        $(".loading").removeClass("loadingnow");
        audioPlaying = false;
    }

    function error_error(e) {
        //alert('great error');
        //alert(e.message);
    }

    function stopAudio() {
        if (media) {
            media.stop();
            audioPlaying = false;
        }
    }
</script>