如何在JavaScript中暂停和恢复设置的间隔计时器？

Question

如何暂停/恢复setInterval函数？我有一些运行setInterval函数的代码，每4秒运行一次。代码循环遍历图标和文本，我希望能够在任何给定时间单击任何图标以显示其文本，从而暂停setInterval计时器，然后让setInterval计时器正常从该图标恢复。

这是运行中的代码的精妙之处-https://jsfiddle.net/j0dhpkfs/

<div id="outer">
        <div id="inner">
                <div class="item wifi-icon"><i class="fa fa-wifi " aria-hidden="true"></i></div>
                <div class="item plug-icon"><i class="fa fa-plug" aria-hidden="true"></i></div>
                <div class="item suitcase-icon"><i class="fa fa-suitcase" aria-hidden="true"></i></div>
                <div class="item wheelchair-icon"><i class="fa fa-wheelchair " aria-hidden="true"></i></div>
                <div class="item play-icon"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>
        </div>
        <div id="info">
                <div id="wifi-text" class="icon-text ">
                        <h3>Free WiFi</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="plug-text" class="icon-text ">
                        <h3>Power Sockets</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="suitcase-text" class="icon-text ">
                        <h3>Luggage</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="wheelchair-text" class="icon-text ">
                        <h3>Wheelchair Accessible</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
                <div id="play-text" class="icon-text ">
                        <h3>Onboard Entertainment</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </div>
        </div>

</div>

  #outer {
    width: 100%;
    padding: 10px 30px;
  }

  #inner {
    display: flex;
    justify-content: space-between;

  }

  .item i {
    border: 0.5px solid lightgrey;
    padding: 20px;
    border-radius: 50%;
    font-size: 22px;
  }

  .item i:hover {
    background-color:#74BDE9;
    color: #ffffff;
    cursor: pointer;;
  }

  .active {
    background-color:#74BDE9;
    border: 1px solid black;
    color: #ffffff;
    cursor: pointer;
  }

  div.icon-text {
    text-align: center;
    margin-top: 20px;
  }

  div.icon-text h3 {
    font-size: 16px;
    font-weight: bold;;
  }
  div.icon-text p {
    font-size: 14px;
  }

$(document).ready(function(){

const icons = document.getElementsByClassName("fa");
const texts = document.getElementsByClassName("icon-text");
Array.from(texts).forEach(textElement => {
  textElement.style.display = "none";
});


setInterval(() => {
  const iconsArray = Array.from(icons);
  const activeIconIndex = iconsArray.findIndex(icon => icon.classList.contains("active"));
  const nextActiveIndex = (activeIconIndex + 1) % iconsArray.length
  iconsArray[nextActiveIndex].classList.add("active");
  iconsArray[activeIconIndex].classList.remove("active");
  toggleText(iconsArray[nextActiveIndex].classList);
}, 4000);


function toggleText(activeIconClasses) {
  let textIdToActivate = "";
  switch (activeIconClasses[1]) {
    case "fa-wifi":
      textIdToActivate = "wifi-text";
      break;
    case "fa-plug":
      textIdToActivate = "plug-text";
      break;
    case "fa-suitcase":
      textIdToActivate = "suitcase-text";
      break;
    case "fa-wheelchair":
      textIdToActivate = "wheelchair-text";
      break;
    case "fa-youtube-play":
      textIdToActivate = "play-text";
      break;
  }
  Array.from(texts).forEach(textElement => {
    textElement.style.display = "none";
  });
  const textElement = document.getElementById(textIdToActivate);
  textElement.style.display = "block";

}


});