為元素創建功能以停止“setInterval”功能（由另一個元素觸發）

我創建了一個自動幻燈片 - 在單擊“選單項”后開始。當單擊不同的“選單項”時，我正在尋找一種“關閉它”的方法。整個問題可以抽象為一個簡單的例子：

構建“停止”的功能<li>（可能會利用stopInterval）。我想不出解決方案，有人有想法嗎？

const li1 = document.getElementById("li1")

li1.addEventListener("click", slideShowAbstract)

function slideShowAbstract(e) {

    const y = setInterval(()=> console.log("playing"), 2000)

    }

ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
  }
  
li {
    margin: 1rem;
}

li:hover {
    cursor: pointer;
}

            <ul>
                <li id="li1">play</li>
                <li id="li2">stop</li>
            </ul>

uj5u.com熱心網友回復：

更好的方法？

為避免全域變數可能受到副作用的影響，請使用一個物件，您可以在其中添加有用的方法。

const 
  btPlay = document.querySelector('#bt-play')
, player = (()=> // IIFE  for object { play(), stop() } method
  {
  let refIntv = 0, counter = 0 // inside Object values ( closure )
    ;
  function playerAction()  // inside private function
    {
    console.clear()
    console.log( 'playing',   counter)
    }
  return {
    play()
      {
      counter = 0
      console.clear()
      console.log('start playing')
      refIntv = setInterval( playerAction , 2000)
      }
  , stop()
      {
      clearInterval( refIntv )
      console.clear()
      console.log('stop playing')
      }
    }
  })();


btPlay.onclick =_=>
  {
  if (btPlay.classList.toggle('stopped'))  player.play()
  else                                     player.stop()
  }

#bt-play { 
 margin : 1em 3em;
 width  : 5em; 
 }
#bt-play::after { 
 content : 'play';
 }
#bt-play.stopped::after { 
 content : 'stop';
 }

<button id="bt-play"></button>
<!-- control by interface : same button for start and stop -->

界面控制：
如果您有 2 個按鈕（開始 停止），則用戶可以在開始按鈕上單擊 2 次，您最終會得到 2 個重疊的間隔程序（或更多），而無法找到上一個 setInterval 的參考，因為此變數已被替換為參考以下區間的程序

如果沒有，您還可以添加一個測驗來驗證之前沒有運行間隔程序。

uj5u.com熱心網友回復：

您可以宣告y外部，以便您可以從多個處理程式訪問它。

const li1 = document.getElementById("li1")
const stopElement = document.getElementById("stopButton")
let intervalTimer;

li1.addEventListener("click", slideShowAbstract);
stopElement.addEventListener('click', stopSlideShow);


function slideShowAbstract(e) {
  intervalTimer = setInterval(() => console.log("playing"), 2000);
}

function stopSlideShow(){
  clearInterval(intervalTimer);
}

uj5u.com熱心網友回復：

示例中注釋的詳細資訊

// Reference both items
const li1 = document.getElementById("li1");
const li2 = document.getElementById("li2");

// Bind both items to click event but call different handlers
li1.addEventListener("click", start);
li2.addEventListener("click", stop);

// Declare interval ID
let y;
// Define time interval
let t = 2000;
// Define counter
let tick = 0;
// Define the function to run on each interval
const log = () => console.log(t * tick  );

// Define the event handler called from li1
function start(e) {
  // If the tag clicked was #li1 and y isn't defined yet...
  if (e.target.matches('#li1') && !y) {
    // ...Initiate interval to call log()
    y = setInterval(log, t);
  }
}
// Define the event handler called from li2
function stop(e) {
  // If user clicked #li2...
  if (e.target.matches('#li2')) {
    // ...Stop interval...
    clearInterval(y);
    // ...reset interval ID
    y = null;
  }
}

ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

li {
  margin: 1rem;
}

li:hover {
  cursor: pointer;
}

<ul>
  <li id="li1">play</li>
  <li id="li2">stop</li>
</ul>

標籤：javascript

上一篇：優雅的解決方案-嵌套for回圈（eslintno-await-in-loop）

下一篇：為什么我不能在螢屏外拿任何物體