34068


JSでsetTimeoutでのスライドショーの停止、再生がうまくいきません。

<http://codepen.io/anon/pen/RVNgLr>

[code]

    let iterative = () => {
      setTimeout(myChange, 5000); // 
    }
    
    const pauseBtn = document.getElementById('js-pause-btn');
    pauseBtn.addEventListener('click', () => {
      clearTimeout(iterative);
    });
    
    const playBtn = document.getElementById('js-play-btn');
    playBtn.addEventListener('click', () => {
      iterative();
    });
[/code]

[code]

    <div class="slideshow-wrap-selectimg--slidegame">
      <div class="slideshow-wrap-selectimg--slidegame__slideimg-wrap">
        <img id="idshow1-selectimg--slidegame" class="slideshow-wrap__item1-selectimg--slidegame is-fadeout-selectimg--slidegame" src="img/common-img/corpolate-img.jpg">
        <img id="idshow2-selectimg--slidegame" class="slideshow-wrap__item2-selectimg--slidegame is-fadein--slidegame" src="img/common-img/corpolate-img.jpg">
      </div>
      <div class="slideshow-wrap-selectimg--slidegame__selectimg-wrap">
        <ul>
          <li id="js-selectimg-list1--slidegame" class="slideshow-wrap-selectimg--slidegame__select-list">
            <img class="slideshow-wrap-selectimg--slidegame__item1" src="img/common-img/corpolate-img.jpg" alt="">
          </li>
          <li id="js-selectimg-list2--slidegame" class="slideshow-wrap-selectimg--slidegame__select-list">
            <img class="slideshow-wrap-selectimg--slidegame__item2" src="img/common-img/corpolate-img.jpg" alt="">
          </li>
          <li id="js-selectimg-list3--slidegame" class="slideshow-wrap-selectimg--slidegame__select-list">
            <img class="slideshow-wrap-selectimg--slidegame__item3" src="img/common-img/corpolate-img.jpg" alt="">
          </li>
          <li>
            <!-- href="javascript:void(0)"-リンク先に飛ばないようにする。 -->
            <a id="js-pause-btn" class="controle-btn-wrap__link p-ripple-effect--most-top" href="javascript:void(0)"><i class="c-controle-btn-wrap__item--slidegame material-icons u-text-shadow-0dot1rem-0dot1rem-0dot1rem-a0dot4">pause</i></a>
          </li>
          <li>
            <a id="js-play-btn" class="controle-btn-wrap__link p-ripple-effect--most-top" href="javascript:void(0)"><i class="c-controle-btn-wrap__item--slidegame material-icons u-text-shadow-0dot1rem-0dot1rem-0dot1rem-a0dot4">play_arrow</i></a>
          </li>
        </ul>
      </div>
    </div>
[/code]

問題なく動いているので、停止再生の部分以外は間違えがないと思うのですが、  
停止再生の部分に問題はありますでしょうか？  
抜粋しておきました。

[code]

    let iterative = ()=> {
        setTimeout(myChange , 5000);                    // 
    }
    
    const pauseBtn = document.getElementById('js-pause-btn');
    pauseBtn.addEventListener('click', ()=> {
        clearTimeout(iterative);
    });
    
    const playBtn = document.getElementById('js-play-btn');
    playBtn.addEventListener('click', ()=> {
        iterative();
    });
    
[/code]


CC BY-SA 4.0
2017-04-17T06:29:53.707
34064
2019-12-13T20:13:02.683
2019-12-13T20:13:02.683
32986
20834
question
javascript
JSでsetTimeoutでのスライドショーの停止、再生がうまくいきません。


[setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout)の返値が保存されていません。  
その値をペアとなる[clearTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/clearTimeout)に引数として渡す必要があります。

* * *

サンプルコード  
実際の`myChange`の内容（スライドショーを開始する？）などは私にはわからない（スライドショーの停止としてので、clearTimeoutを使うのが適切であるかどうかなどもわからない）ので  
この実行動作は単なるサンプルとして適当に作ってます。  
（またsetTimeout,clearTimeoutの代わりにsetInterval,clearIntervalを使用しています。このサンプルのためにきっかけだけでなく連続動作をになうため）  
PLAYボタンを押すとテキストエリアに`*`を追加表示し続けます。  
PAUSEボタンを押すと停止します。  
PLAYボタンを押すと再開します。  
複数回同じボタンが連続して押される場合のために、  
PLAYボタンを押したらPLAYボタンがDISABLEされて押せなくなるなどの排他処理が必要です。  
以下の場合はTimeIDが既に設定されているか（nullでないか）どうかで処理を分けています。

[code]

    let myChange = ()=> {
      document.getElementById('disp').value += "*";
    }
    
    let TimeID = null;
    
    let iterative = ()=> {
        if(TimeID == null)
            TimeID = setInterval(myChange , 500); 
    }
    
    const pauseBtn = document.getElementById('js-pause-btn');
    pauseBtn.addEventListener('click', ()=> {
        if(TimeID != null){
            clearInterval(TimeID);
            TimeID = null;
        }
    });
    
    const playBtn = document.getElementById('js-play-btn');
    playBtn.addEventListener('click', ()=> {
        iterative();
    });
[/code]

[code]

    <textarea cols="20" rows=10" id="disp"></textarea><br />
    <button type="button" id="js-play-btn">PLAY</button>
    <button type="button" id="js-pause-btn">PAUSE</button<br />
[/code]

* * *

setTimeout, clearTimeoutを使用する例（ボタンを使用不可にする）

[code]

    let myChange = ()=> {
        document.getElementById('disp').value += "*";
        iterative();//これがあるはず。
    }
    
    let TimeID = null;
    
    let iterative = ()=> {
        TimeID = setTimeout(myChange , 500); 
    }
    
    const pauseBtn = document.getElementById('js-pause-btn');
    pauseBtn.addEventListener('click', ()=> {
        clearTimeout(TimeID);
        playBtn.disabled = false;
    });
    
    const playBtn = document.getElementById('js-play-btn');
    playBtn.addEventListener('click', ()=> {
        playBtn.disabled = true;
        iterative();
    });
[/code]

[code]

    <textarea cols="20" rows=10" id="disp"></textarea><br />
    <button type="button" id="js-play-btn">PLAY</button>
    <button type="button" id="js-pause-btn">PAUSE</button<br />
[/code]


CC BY-SA 3.0
2017-04-17T08:47:43.360
34068
2017-04-19T15:10:36.573
2017-04-19T15:10:36.573
5044
5044
34064
answer