如何使用另一个函数来停止 foreach 循环

Question

I am using the foreach loop to call a php page that sends back html of one gallery image. The forEach Loop is triggered by the function galleryplayer. Gallery size can be anything from 1 to 99 photos max.

I want to use the function stopGalPlay to halt the foreach loop on the iteration it is currently on. However after a week of trying to solve this I cannot think how.

Reading about it, the consensus says that I should not be using a forEach loop. If so how would I rewrite the galleryPlayer function to use a different kind of loop and/or incorporate some mechanism to break the loop and execute the code in the stopGalPlay function.

I know the question of breaking a foreach loop has been answered a million times before but I cannot figure out how to incorporate a stop play into my image gallery.

Any help would be greatly appreciated. Note that I want to use pure javascript without libraries like jquery or others.

var detailPageTabContentContainer = document.getElementById("detailPageTabContentContainer");

// Open the Modal
function openGalleryModal(galId, count, rowTotal) {
  var galId = arguments[0];
  var count = arguments[1];
  var rowTotal = arguments[2];
  const api_url = "includes/ajax/GalleryViewerXhr.php?galId=" + galId + "&&count=" + count + "&&rowTotal=" + rowTotal;
    fetch(api_url, { method: 'get', credentials: 'same-origin' })
      .then(response => response.text())
      .then(html => {
    detailPageTabContentContainer.innerHTML = html;
  })
      .catch((err) => console.log("Can’t access " + api_url + err));
} // End of function openGalleryModal


// Close the Modal
function closeGalleryModal() {
  document.getElementById("galleryModal").style.display = "none";
  document.getElementById("active").click();
} // End of function closeGalleryModal


function plusGallerySlides(galId, count, rowTotal, n) {
  var galId = parseInt(arguments[0]);
  var count = parseInt(arguments[1]);
  var rowTotal = parseInt(arguments[2]);
  var n = (arguments[3]);
  var GalIdFragment = (Math.floor(galId / 100));
  var GalIdFragmentString = GalIdFragment.toString();
  var countString;
  if (count + n > rowTotal) {newCount = 1}
  if (count + n < 1) {newCount = rowTotal}
  if (count + n == rowTotal) {newCount = rowTotal}
  if ((count + n < rowTotal)&&(count + n != 0)) {newCount = count + n}
  if (count.toString().length == 1) {countString = "0" + count}
  else {countString = count}
  if (newCount.toString().length == 1) {countString = "0" + newCount } else {countString = newCount};
  countString = countString.toString();
  newGalId = GalIdFragmentString + countString;
  const api_url = "includes/ajax/GalleryViewerXhr.php?galId=" + newGalId + "&&count=" + newCount + "&&rowTotal=" + rowTotal;
    fetch(api_url, { method: 'get', credentials: 'same-origin' })
      .then(response => response.text())
      .then(html => {
    detailPageTabContentContainer.innerHTML = html;
  })
      .catch((err) => console.log("Can’t access " + api_url + err));
} // End of function plusGallerySlides


function stopGalPlay(galId, count, rowTotal) {
  var galId = parseInt(arguments[0]);
  var count = parseInt(arguments[1]);
  var rowTotal = parseInt(arguments[2]);
  console.log("gallery Id is " + galId + ". Count is " + count + ". Row total is " + rowTotal + ".");
  const api_url = "includes/ajax/GalleryViewerXhr.php?galId=" + galId + "&&count=" + count + "&&rowTotal=" + rowTotal;
    fetch(api_url, { method: 'get', credentials: 'same-origin' })
      .then(response => response.text())
      .then(html => {
    detailPageTabContentContainer.innerHTML = html;
  })
      .catch((err) => console.log("Can’t access " + api_url + err));
}


function galleryplayer(galId, count, rowTotal) {
  var galId = parseInt(arguments[0]);
  var count = parseInt(arguments[1]);
  var rowTotal = parseInt(arguments[2]);
  var GalIdFragment = (Math.floor(galId / 100));
  var GalIdFragmentString = GalIdFragment.toString();
  var galIdArr = [];
  for ( i = 1; i <= rowTotal ; i++ ) {
   galIdArr.push(i < 10 ? (GalIdFragmentString + "0" + i.toString()) : GalIdFragmentString + i.toString())
  };
  var interval = 4950;
  var promise = Promise.resolve();
    galIdArr.forEach(function (ArrayGalId, i) {
    promise = promise.then(function() {
      const api_url = "includes/ajax/GalleryViewerXhr.php?galId=" + ArrayGalId + "&&count=" + (i+1) + "&&rowTotal=" + rowTotal;
        fetch(api_url, { method: 'get', credentials: 'same-origin' })
          .then(response => response.text())
          .then(html => {
        detailPageTabContentContainer.innerHTML = html;
        document.getElementById("galNext").style.display = "none";
        document.getElementById("galPrev").style.display = "none";
        document.getElementById("galPlay").style.display = "none";
        document.getElementById("galClose").style.display = "none";
        document.getElementById("galPhoto").classList.add("Gallery-Player-Fade-in-Out");
      })
      return new Promise(function(resolve) {
        setTimeout(resolve, interval);
        if((i+1) === (galIdArr.length)) {
          var lastGalId = (galIdArr[galIdArr.length -1]);
          var galLength = galIdArr.length;
          const api_url = "includes/ajax/GalleryViewerXhr.php?galId=" + lastGalId + "&&count=" + galLength + "&&rowTotal=" + rowTotal;
            fetch(api_url, { method: 'get', credentials: 'same-origin' })
            .then(response => response.text())
            .then(html => {
          detailPageTabContentContainer.innerHTML = html;
          });
        };
      });
    });
  }); 
}// End of function galleryplayer

Answer 1

You could use a while loop. while this condition is false do this. Or you could put the forEach loop inside of a function and return when it is supposed to break.