Javascript 为元素创建功能以停止setInterval功能(由另一个元素触发)

发布于06月24日

我已经创建了一个自动幻灯片-点击"菜单项"后开始播放.我正在寻找一种方法来"关闭"，当点击不同的"菜单项".整个问题可以抽象为一个简单的例子:

构建"stop"<li>的功能(可能使用stopInterval).我想不出一个解决方案，有人有什么 idea 吗？

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>

推荐答案

更好的方法？

要避免全局变量会受到副作用的影响，请使用对象，您可以向其中添加有用的方法.

const 
  btPlay = document.querySelector('#bt-play')
, player = (()=> // IIFE  for object { play(), stop() } method
  {
  let // inside Object values ( closure )
    refIntv   = 0
  , counter   = 0
  , onProcess = false // security to avoid multiple setInterval processes
    ;
  function playerAction()  // inside private function
    {
    console.clear()
    console.log( 'playing', ++counter)
    }
  return {
    play()
      {
      if (onProcess) return  // security to avoid doing setInterval() twice
      
      onProcess = true
      counter   = 0
      console.clear()
      console.log('start playing')
      refIntv = setInterval( playerAction , 2000)
      }
  , stop()
      {
      if (!onProcess) return  // security to avoid doing clearInterval() twice
 
      clearInterval( refIntv )
      onProcess = false
      
      console.clear()
      console.log('stop playing')
      }
    }
  })();


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

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

<h5> case 1: same button for start and stop </h5>

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

<h5> case 2: 2 buttons   </h5>

<button onclick="player.play()">play</button>
<button onclick="player.stop()">stop</button>

interface control:
if you have 2 buttons (start + stop), the user can click 2 times on the start button and you you end up with 2 overlapping interval processes (or more) without the possibility of finding the reference of the previous setInterval since this variable has been replaced to reference the process of the following interval

如果没有，您还可以添加一个测试，验证之前没有运行间隔进程.