JSでsetTimeoutでのスライドショーの停止、再生がうまくいきません。
http://codepen.io/anon/pen/RVNgLr
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();
});
<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>
問題なく動いているので、停止再生の部分以外は間違えがないと思うのですが、
停止再生の部分に問題はありますでしょうか?
抜粋しておきました。
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();
});
let iterative = ()=> { setTimeout(myChange , 5000); // }
は、let iterative = function() { setTimeout(myChange , 5000); };
(関数オブジェクトと実質同じ)ですので、「変数intertiveに入った」のは中身の関数の返値ではなくsetTimeout
をラップしている関数です。iterative
は、関数として実行されることを期待されているので単なる値として書き換えると動作しないと思います。なので、その解決策(?)はよろしくないです。