禁用jQuery UI对话框

Question

I have a jquery ui dialog which is displayed on button click. This dialog contains three buttons (font awesome icons) which when any one is clicked a list of words is run thru, highlighting each word in turn and playing its associated audio file. When one of the three buttons within the dialog is clicked it is necessary for the dialog to close (or be hidden) in order that the user can see the word lists on the underlying page. This part is working OK, But what I have found difficult is how to disable the button controlling the dialog while any one word list is being playing. This is necessary to prevent several word lists playing at the same time. I have tried using a flag - rpt_dlog_run - but I'm unable to get the logic right and I think it may be the wrong approach anyhow. Here is the html:

<div id="ws_title"><p class="title_items">Word Set 1
<a class="btn_repeat" href="#"><span class="fa fa-repeat fa_repeat_ws"></span></a>

and the jquery code:

jQuery(document).ready(function() {
  var rpt_dlog_run = false;
  var ws_repeat_dlog = jQuery("div#ws_repeat_dialog").dialog({
  autoOpen: false,
  modal: true,
  position: "center",
  resizable: false,
  dialogClass: "ws_repeat",
  draggable: false,
  create: function() {
    jQuery(this).parents(".ui-dialog")
    .css("border", "1px solid #0000C6")
    /*  .....  various other css settings ..... */
    .find(".ui-dialog-header")
    .css("display","none")
    .css("font-size", "1.2em");
  }
});
jQuery("a.btn_repeat").on("click", function(evnt) {  
  div#ws_title
  if(!rpt_dlog_run)  {
  evnt.stopPropagation();
  ws_repeat_dlog.dialog("open");
  var modal_content  ='<div id="ws_repeat_modal">
  /* ....   content of dialog html    ....*/
  </div>';
  ws_repeat_dlog.append(modal_content);
  jQuery("p#ws_rpt1").on("click", function (evnt) { // NB needs to be changed, move to dialog box
  rpt_dlog_run = true;
  evnt.stopPropagation();
   ws_repeat_dlog.dialog("close");
  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 = i + 2;   //i++;     this is a real kludge, but it will do to save time
    if ( i < 100) {
        jQuery.doTimeout(1500, function()  {
          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(1500, function()  {
     wordList.removeClass("set_font_green");
   });
  }
 rpt_dlog_run = false;
});
}
});

/*    before closing, empty contents of dialog to avoid content repetition   */
ws_repeat_dlog.dialog({
  beforeClose: function( ) {
    ws_repeat_dlog.empty();
  }
});
     rpt_dlog_run = false;
});

Any help would be most welcome.

Answer 1

Worked out the problem, inserted the "else" statement + code and removed other flags "rpt_dlog_run" set to "false".

  if ( i < 100) {
      jQuery.doTimeout(1500, function()  {
        hiliteTextAudioPlay(i);
      });
  }else{
  rpt_dlog_run = false;
  }