jquery - javascript - Push function to array, loop through and remove after executed -

i trying create array holds pending error messages shows on dom (using jquery that) , loop through array see if there error messages call, , if remove them after executing them.

my problem can't figure out how push function array , execute it. have far:

var dialogqueue = []  dialogqueue.push(errorcall("test", "test", "test", "test"));  (var queuenum = 1, 1 < dialogqueue.length, 1++) {     alert(dialogqueue[1]) } 

and if helps, code showing error messages:

function dialogshow() {     $(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")     $(".body-wrapper").addclass("errorfilter");     $(".dialog-anim").animate({         opacity: 1,         margintop: "-=20px"     })     settimeout(function () {         $(".errorfilter").addclass("blur");     }, 100);  }  function dialoghide() {     $(".dialog-con").css("background", "rgba(0,0,0,.0")     $(".body-wrapper").removeclass("blur");     $(".dialog-anim").animate({         opacity: 0,         margintop: "-=25px"     }, 300)     settimeout(function () {         $(".dialog-con").css("display", "none");         $(".body-wrapper").removeclass("errorfilter");          // code removing function array after pushing ok on dialog      }, 1000); }  function errorcall(title, sub, text, code) {     $(".dialog .title").text(title);     $(".dialog .subtitle").text(sub);     $(".dialog .text").html(text);     $(".dialog .error-code").html(code);     dialogshow(); } 

i'll give fiddle full errorcall() function in action:

function dialogshow() {      $(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")      $(".body-wrapper").addclass("errorfilter");      $(".dialog-anim").animate({          opacity: 1,          margintop: "-=20px"      })      settimeout(function () {          $(".errorfilter").addclass("blur");      }, 100);    }    function dialoghide() {      $(".dialog-con").css("background", "rgba(0,0,0,.0")      $(".body-wrapper").removeclass("blur");      $(".dialog-anim").animate({          opacity: 0,          margintop: "-=25px"      }, 300)      settimeout(function () {          $(".dialog-con").css("display", "none");          $(".body-wrapper").removeclass("errorfilter");      }, 1000);  }    function errorcall(title, sub, text, code) {      $(".dialog .title").text(title);      $(".dialog .subtitle").text(sub);      $(".dialog .text").html(text);      $(".dialog .error-code").html(code);      dialogshow();  }    errorcall("hello stackoverflow!","this how error message dialog looks!","blah blah blah blah","code code code");

.dialog-con {      height: 100%;      display: none;      position: fixed;      width: 100%;      background-color: rgba(0, 0, 0, .0);      z-index: 50;      transition: ease 300ms;  }    .dialog-anim {      width: 100%;      height: 100%;      display: none;      display: flex;      flex-direction: column;      justify-content: center;      opacity: 0;      margin-top: -20px;  }    .dialog {      margin: auto;      padding: 12px 27px;      background: white;      border-radius: 3px;      width: 520px;      transform: translatey(30px)  }    .dialog .title-con {      margin-bottom: 25px;  }    .dialog .title {      font-size: 35px;      padding-bottom: 7px;  }    .dialog .error-code {      margin-top: 15px;      color: rgba(0, 0, 0, .6);      font-family: "courier new", courier, monospace  }    .dialog .subtitle {      font-size: 17px;      color: rgba(0, 0, 0, 0.4);  }    .dialog .text {}    .dialog .button-con {      margin-top: 25px;  }    .dialog button {      margin: auto;      float: right;      color: white;      border: none;      padding: 9px 37px;      background: #10b5ff;      text-transform: uppercase;      font-weight: bold;      border-radius: 3px;  }    .dialog button:hover {      background: black;      cursor: pointer;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="dialog-con">          <div class="dialog-anim">              <div class="dialog">                  <div class="title-con">                      <div class="title">error message title</div>                      <div class="subtitle"></div>                  </div>                  <div class="text-con">                      <div class="text">error message</div>                      <div class="error-code"></div>                  </div>                  <div class="button-con" onclick="dialoghide()">                      <button>ok</button>                  </div>              </div>          </div>      </div>

(the ok button displacement result of tiny viewport, ignore it.)

so reason want in event triggers multiple errors, pushed array , shown 1 after 1 (pressing ok shows next 1 etc).

you need create function wrapper store them in array. stands you're invoking errorcall push array. try code instead:

var dialogqueue = []  dialogqueue.push(     function () {         errorcall("test", "test", "test", "test")     } );  (var queuenum = 0, 1 < dialogqueue.length, queuenum++) {     alert( dialogqueue[queuenum]() ); } 

you wanted remove after execution, instead:

while(dialogqueue.length > 0) {     alert( dialoguequeue[0]() );     dialoguequeue.shift(); } 

here's simplified example:

var funcarr = [];  funcarr.push( console.log("cat") ); // calls console.log, logging "cat".  after console.log // evaluated push return value `undefined`  // instead, wrap console.log in anonymous function.  gives // function execute desire when called. funcarr.push( function() { console.log("cat"); } );  // there nothing invoke now, because creating new function. // if we: console.log( funcarr ); // get: [function anonymous()]  // if say: funcarr[0]; // evaluate to: function() {     console.log("cat"); };  // therefore invoking funcarr[0] calls anonymous function, runs // function wanted run. funarr[0]();