カルーセルで自動再生（オートプレイ）を実装する際、ユーザーがスライダー上にマウスホバー中は一時停止したい。この要件を満たすのに適切な実装はどれですか？
- setTimeoutを1回だけ使う
- setIntervalで自動送りし、mouseenterで停止・mouseleaveで再開する
- requestAnimationFrameで毎フレーム送る
- CSSだけで実現する
正解
- setIntervalで自動送りし、mouseenterで停止・mouseleaveで再開する
解説
setIntervalで一定間隔の送りを行い、ユーザー操作（ホバー）中はclearIntervalで一時停止、離れたら再開するのが一般的です。
使用例（サンプルコード）
[ html ]
<div id="carousel">...</div>
<script>
let timer;
function start(){ timer = setInterval(()=>nextSlide(), 3000); }
function stop(){ clearInterval(timer); }
const el = document.getElementById('carousel');
el.addEventListener('mouseenter', stop);
el.addEventListener('mouseleave', start);
start();
function nextSlide(){ /* スライド移動処理 */ }
</script>