アロー関数で変数に入れて名前のある関数にする

質問

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);
});

停止は下記でできるがこれですと名前のある関数にできないので再度動かすことができないのです。

let iterative = {
setTimeout(myChange , 5000); //
}

pauseBtn.addEventListener('click', ()=> {
clearTimeout(iterative);
});

const playBtn = document.getElementById('js-play-btn');
playBtn.addEventListener('click', ()=> {
iterative();
});

pauseBtn.addEventListener('click', ()=> {
clearTimeout(iterative);
});

iterative();はiterativeという名前の関数を作らないと実行できないので、停止できない理由はわかっているのですが、アロー関数で変数に入れて名前のある関数にすることができないのでどうすれば両方とも実現できるのかわかりません。

回答No.2

think49

この質問はstackoverflowの質問の続き(マルチポスト)なので、回答される方は下記スレッドを参照する事をお勧めします。

javascript - JSでsetTimeoutでのスライドショーの停止、再生がうまくいきません。 - スタック・オーバーフロー
https://ja.stackoverflow.com/questions/34064/js%e3%81%a7settimeout%e3%81%a7%e3%81%ae%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%82%b7%e3%83%a7%e3%83%bc%e3%81%ae%e5%81%9c%e6%ad%a2-%e5%86%8d%e7%94%9f%e3%81%8c%e3%81%86%e3%81%be%e3%81%8f%e3%81%84%e3%81%8d%e3%81%be%e3%81%9b%e3%82%93

質問の範囲は非常に広い(回答する度に基礎的な内容の質問が追加で来ます)ので、覚悟の上、回答する必要があります。

Re: htmlcss123 さん

回答No.1

b0a0a

clearTimeoutに渡すのはsetTimeTimeoutの戻り値である数値です
何度も繰り返したければ、setIntervalの方を使ってください
myChangeとはなんですか?動くコードを書いてください