2

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

var timeout = 0;
 $('#container td').each(function(){
   var td = this;
   setTimeout(function() {
     var new_text = $(td).find(text).html();
     popup_text.html(new_text);
     popup.fadeIn('fast').delay(1000).fadeOut('slow');
   }, timeout);
   timeout += 1000 + 1000;
});

テーブルセルからテキストを取得し、遅延してレイヤーに表示されます。1つの質問：このコードを無限ループで実行するにはどうすればよいですか？2つの質問：一時的に停止してから続行するpopopサイクルにマウスを合わせるとどうすればよいですか？どうもありがとう！

4

2 に答える 2

8

1つの方法は、繰り返されるコードを関数に配置し、関数の最後にそれ自体を繰り返すようにすることです。

var timeout = 1000;
var action = function() {
    // Do stuff here
    setTimeout(action, timeout);
};
action();

ただし、ahrenが提案したように、setIntervalの方が優れている可能性があります。

var timeout = 1000;
var action = function() {
    // Do stuff here
};
setInterval(action, timeout);

違いはわずかですが、何らかの理由でマシンの実行速度が遅い場合、setIntervalバージョンは平均して1秒ごとにコードを実行しますが、setTimeoutバージョンは最大で1秒に1回コードを実行します。

ただし、これらのメソッドはどちらもeach（）で実際にはうまく機能しないため、ポップアップのシーケンスをどこかに保存して、それらをステップ実行する必要があります。

var timeout = 1000;
var tds = $('#container td');
var index = 0;
var action = function() {
    var td = tds[index];
    var new_text = $(td).html();
    popup.html(new_text);
    popup.fadeIn('fast').delay(1000).fadeOut('slow');

    if(++index >= tds.length)
        index = 0;        
};
setInterval(action, timeout);
action();

最後に、ポップアップがホバーされている間に次のポップアップに移動しないようにするために、関数の開始時にそのチェックを追加できます。また、「ホバーの確認-フェードアウト-テキストの変更-フェードイン」になるようにアニメーションを再配置する必要があります。

var timeout = 1000;
var tds = $('#container td');
var index = 0;
var action = function() {
    if(popup.is(':hover'))
        return;

    var td = tds[index];
    var new_text = $(td).html();
    popup.fadeOut('slow', function() {
        popup.html(new_text);
    }).fadeIn('fast');

    if(++index >= tds.length)
        index = 0;        
};
setInterval(action, timeout);
action();

jsFiddle： http: //jsfiddle.net/qWkYE/2/

于 2012-08-23T23:19:35.087 に答える
1

短いクリーンな方法が好きな場合は、jquery-timingプラグインを使用して次のように記述します。

$.fn.waitNoHover = function(){
  return this.is(':hover') ? this.wait('mouseleave') : this;
};
$('#popups div').repeat().each($).fadeIn('fast',$)
  .wait(200).waitNoHover().fadeOut('slow',$).all()

</ p>

http://jsfiddle.net/creativecouple/fPQdU/3/でこれを参照してください

于 2012-08-24T08:18:56.610 に答える