Кнопка не отключается при воспроизведении аудиофайлов

У меня есть список слов и соответствующие им аудиофайлы. При нажатии кнопки аудиофайлы воспроизводятся последовательно. Эта часть работает нормально. Но кнопка не отключается во время воспроизведения списка. Таким образом, список может воспроизводиться несколько раз одновременно. Вот html:

    <a class="repeat_btn" href="#"><span class="fa fa-repeat fa_repeat_ws"></span></a>

и вот код jquery:

    "use strict";
    jQuery.noConflict();
    jQuery(document).ready(function() {
      jQuery("a.repeat_btn").click(function (evnt) {
        evnt.stopPropagation();
        jQuery(this).attr("disabled","disabled");                         // to disable button
        var engWords = jQuery("span.audio"),
          pathVar = document.getElementById("pathVar").innerHTML,
          audioElement = document.createElement("audio"),
          audioType = Modernizr.audio.ogg? ".ogg": ".mp3",
          i = 0;
        audioPlay(i);
        audioElement.addEventListener( "ended", function() {
          i++;
            if ( i < 100 ) {
              audioPlay(i);
            }
        });
        function audioPlay(i)  {
          var wordList = jQuery("span#"+engWords[i].id),
            audioPath = pathVar+engWords[i].id+audioType;
          wordList.addClass("set_font_green");
          audioElement.src = audioPath;
          audioElement.play();
          jQuery.doTimeout(1000, function()  {
           wordList.removeClass("set_font_green");
         });
        }
        jQuery(this).removeAttr("disabled");   // to enable the button
      });
    });

Мой вопрос заключается в том, что нужно сделать, чтобы кнопка была отключена во время воспроизведения списка слов и снова включена, когда список слов закончил воспроизведение.


button audio jquery disabled-control
person RoyS    schedule 19.05.2015    source источник
comment
disabled не работает на якорях <a>   -  person Shaunak D    schedule 19.05.2015

Ответы (1)


arrow_upward
0
arrow_downward

Как отмечено в комментариях, property disabled не входит в стандарт для элементов привязки; только кнопки. Я бы предложил вам просто добавить к нему класс и продолжить, только если класс отсутствует.

jQuery("a.repeat_btn").click(function (evnt) {
    // stop if the class is present
    if (this.classList.contains('disabled'))
        return;
    this.classList.add('disabled');
    // rest of code ...

    // enable again
    this.classList.remove('disabled');
});

Код выше не совместим с IE8 из-за использования classList.

person Eric    schedule 19.05.2015
comment
это не работает, если this.classList.remove('disabled'); помещается в область действия функции щелчка, но работает, если this.classList.remove('disabled'); помещается в область действия функции готовности документа, но затем страницу необходимо обновить, чтобы снова воспроизвести список - person RoyS; 19.05.2015
comment
Я думаю, ты все неправильно понял. this относится к DOMNode, к которому привязано событие, внутри функции обратного вызова. - person Eric; 19.05.2015
comment
Я поместил код в функцию обратного вызова, как вы указали, но множественное воспроизведение все еще происходит. какие-либо предложения :) - person RoyS; 19.05.2015