0

私は次のコードを持っています：

// After 8 seconds change the slide...
        var timeout = setTimeout("changeSlide()", 8000);

        $('div.slideshow').mouseover(function() {

            // If the user hovers the slideshow then reset the setTimeout
            clearTimeout(timeout);
        });

        $('div.slideshow').mouseleave(function() {

            clearTimeout(timeout);
            var timeout = setTimeout("changeSlide()", 8000);

        });

私がしたいのは、誰かがスライドショーdivをホバーしない限り、関数changeSlideをループ内で8秒ごとに実行することです。カーソルを削除したら、もう一度タイムアウトを実行します。

ただし、ループは1回だけ発生し、ホバーによってタイムアウトが停止したり、再開したりすることはありません：/

編集：

これは素晴らしいループですが、ホバーをオンまたはオフにすると、関数が複数回実行されます。

// After 8 seconds change the slide...
        var timeout = setInterval(changeSlide, 2000);

        $('div.slide').mouseover(function() {

            // If the user hovers the slideshow then reset the setTimeout
            clearInterval(timeout);
        });

        $('div.slide').mouseleave(function() {

            clearInterval(timeout);
            var timeout = setInterval(changeSlide, 2000);

        });
4

5 に答える 5

1

setTimeout（またはsetInterval）を指定すると、clearTimeoutおよびclearIntervalに使用される値が返されます。正しい使用法は次のとおりです。

var timeout = setTimeout(changeSlide, 8000);
clearTimeout(timeout);

また、clearIntervalではなくclearTimeoutを使用していることにも注意してください。

また、「changeSlide」の前後に引用符を付けなかったこと、および親子を削除したことにも気付くでしょう。文字列をsetTimeoutに渡す場合、eval（）が使用されます。一般に、eval（）は避けることをお勧めします。したがって、代わりに、関数への直接参照（引用符なし）を渡します。実行をsetTimeoutに延期する代わりに、実際にはchangeSlide（）をすぐに呼び出すため、parensは使用しません（setTimeoutの引数として、changeSlide（）の結果を渡します）。

編集：継続的に実行するには、changeSlideを呼び出すたびにsetTimeoutを再度呼び出す必要があります。setTimeoutは1回実行されます。別の方法として、自動的に繰り返されるsetIntervalを使用できます。setIntervalの1つの注意点は、間隔が短すぎて、呼び出すコールバックの実行に長い時間がかかる場合、遅延なしに次々に実行するために一連の間隔がキューに入れられる可能性があることです。8秒間隔では、この問題に直面しない可能性があります。

編集2：

var timeout;
var changeSlide = function(){
   // do something to change slides
   clearTimeout(timeout);
   timeout = setTimeout(changeSlide, 8000);
}

// queue up the first changeSlide, all others happen inside changeSlide
timeout = setTimeout(changeSlide, 8000);

$('div.slideshow').mouseleave(function()  {
    clearTimeout(timeout);
    var timeout = setTimeout(changeSlide, 8000);
});
于 2012-04-05T15:18:24.097 に答える
1

ここにいくつかの問題があります。まず、タイムアウトを設定するときに、それを停止する可能性がある場合は、その関数呼び出しの戻り値を変数に格納する必要があります。

    var slide_timer = setTimeout(changeSlide, 8000);

次に、clearTimeout（ではなくclearInterval）を呼び出すときは、引数を渡す必要があります。どんな議論？電話をかけたときに保存した変数setTimeout

        clearTimeout(slide_timer);

第三に、を使用するsetTimeoutと、1回だけ発火します。setInterval発砲し続けます、そしてあなたはそれclearIntervalを止めるのに使うでしょう。

タイムアウトではなく間隔を使用するタイミングに問題があります。ブラウザはそれらを微妙に異なる方法で処理します。コードでは、違いを理解し、適切な方法を使用することが重要な場合があります。間隔を使用する場合、間隔は1回しか発生しないため、発生するたびにタイムアウトを再確立する必要があります。

var slide_timer = setTimeout(function () {
    changeSlide();
    var slide_timer = setTimeout(changeSlide, 8000);
}, 8000);

また

var slide_timer = setTimeout(changeSlide, 8000);
...
function changeSlide() {
   ... your code ...
    var slide_timer = setTimeout(changeSlide, 8000);
}

（私は前者の方法を好みます）

そして最後に、タイムアウトまたは間隔のどちらを使用する場合でも、文字列をsetTimeoutに渡さず、関数参照を渡します。上記のサンプルコードを参照するか、次のようにしてください。

var slide_timer = setTimeout("changeSlide()", 8000); // <--- DON'T
var slide_timer = setTimeout(changeSlide, 8000);     // <--- DO
var slide_timer = setTimeout(function () {           // <--- DO
    changeSlide() ;
    // other script
}, 8000);

すべてを一緒に入れて：

// After 8 seconds change the slide...
    var slide_timer = setTimeout(changeSlide, 8000);
    $('div.slideshow').hover(function() {
        // If the user hovers the slideshow then reset the setTimeout
        clearTimeout(slide_timer);
    }, function() {
        slide_timer = setInterval(changeSlide, 8000);
    });

ドキュメンテーション

于 2012-04-05T15:29:31.537 に答える
0

次の理由から、setTimeoutではなくsetIntervalが必要だと思います。

setTimeout（expression、timeout）; タイムアウト後にコード/関数を1回実行します

setInterval（expression、timeout）; コード/関数を間隔を置いて実行し、それらの間のタイムアウトの長さ

于 2012-04-05T15:23:14.830 に答える
0

結局、これは最もうまくいきました（しかし、私がこの点に到達するのを助けたのは他の人だったので、私はこれを私の答えとして受け入れません）

// After 8 seconds change the slide...
    var slide_timer = setInterval(changeSlide, 2000);
    $('div.slideshow').hover(function() {
        // If the user hovers the slideshow then reset the setTimeout
        clearInterval(slide_timer);

    }, function() {
        slide_timer = setInterval(changeSlide, 2000);
    });
于 2012-04-05T15:40:55.617 に答える
0

問題はマウスオーバーイベントである可能性があります。マウスオーバーイベントはバブルになるため、ネストされたHTML構造がある場合、イベントは複数回呼び出される可能性があります。 jQueryを使用している場合は、要素に対して1回だけ呼び出されるmousenterイベントを使用する必要があります。

別の注意点として、setIntervalを使用する代わりに、setTimeoutパターンを使用します。このようなもの：

    //Immediately Invoked Function Expression that gets called immediately
    (function() {
        //Make the initial call to your setTimeout function
        repeat();
        //Function will constantly be called
        function repeat() {
            setTimeout(function() {
                //(Put your conditional logic here)
                console.log('test');
                repeat();
            }, 2000);
        }
    })();
于 2012-04-05T15:57:11.880 に答える