1

いくつかの異なる値をループしようとしています。アイデアは、ユーザーがボタンをクリックするとループの実行が開始され、実行されるとコードの一部が表示されるはずです (例ではいくつかの基本的なテキスト)。時間の値 (ミリ秒) に応じて、さまざまな情報を含む一種のダイアログを表示しようとしているため、最初は 3 秒で始まり、その直後に 2 番目が 8 秒間表示され、その後、最後のダイアログが表示されます。 2秒間実行します。

ループごとに時間が異なるように変更する必要がありました。以下の例にはキルスイッチがあり、ループを強制終了できます。誰かがこれを理解できることを願っています。私は何時間も何時間も試しました。

//プラグインオプション

  step:[
      {
          time: 3000,
          name: 'mike',
          age: 30
      },
      {
          time: 8000,
          name: 'john',
          age: 37
      },
      {
          time: 2000,
          name: 'jessica',
          age: 25
      }
  ]

// ループ

  var timeouts = [];

$('.click').click(function(){
  $.each(options.step, function(i, value){

      var time = value.time;                                                        
      timeouts.push(setTimeout(function(){

          $('#target ul').append('<li>'+value.name+'-'+value.age+'</li>')

      },time));

  });

 });

// リセットボタン

  $('.stop').click(function(){
      $.each(timeouts, function (_, id) {
          clearTimeout(id);
      });
      timeouts = [];
  });

編集: 問題は、最初の setTimeout が 3 秒後に実行されるため、ループに追加の値 (0) が必要であることです (最初の値は 0 である必要があります)。つまり、残りは近隣の値を使用します。

4

3 に答える 3

3

スクリプトは3つのタイムアウトを設定します。3秒でマイク、8秒でジョン、2秒でジェシカを表示します。つまり、ジェシカが最初です。それらを一度に1つずつ発生させたい場合は、次の時間を累積する必要があります。

var timeouts = [],
    accum = 0;
$.each(options.step, function(i, value){
    accum += value.time;                                                        
    timeouts.push(setTimeout(function(){
        $('#target ul').append('<li>'+value.name+'-'+value.age+'</li>')
    }, accum));
    // move the addition here if you want them to start immediately
});

（jsfiddle.netでのデモ、すぐに開始）

もう1つの方法は、タイムアウトが発生したときに次のタイムアウトを開始することです。これにより、停止と実行が簡単になります。

var cur = 0,
    $ul = $('#target ul'),
    tid;
function next() {
    if (cur >= options.step.length) return; // and call a final callback?
    var value = options.step[cur];
    $ul.append('<li>'+value.name+'-'+value.age+'</li>');
    cur++;
    tid = setTimeout(next, value.time);
}
function stop() {
    clearTimeout(tid);
}

（jsfiddle.netでのデモ）

于 2012-09-13T11:20:39.353 に答える
0

これにより、すべての値がループされ、setTimeoutがデータ内の時刻に対して関数wrtを呼び出します。'stop'変数は、キルスイッチとして機能するグローバル変数である必要があります 

var stop=0;

$('.stop').click(function(){
     stop=1;
  });
function responseFunction(value)
{
    if(!stop)
   alert(value.name+" "+value.age);
   else return;
}
 $.each(step, function(i, value){
    setTimeout(function(){
                        responseFunction(value);
                        },value.time);
  });
于 2012-09-13T11:51:57.780 に答える
0

より少ないコードで別の方法を提供したいだけです。jquery-timingという名前のプラグインのみを使用する必要があります。これにより、jQuery でのタイミングが容易になります。

$('#target ul').repeat().wait(function(i) {
   this.append('<li>'+options.step[i].name+'-'+options.step[i].age+'</li>');
   return options.step[i].time;
}).until(options.step.length);

function stop() {
   $('#target ul').unwait();
}

私はきれいなコードの大友なので、ここでもまったく同じです。ただし、今回は無名関数ではなく名前付き関数を使用します。

$('#target ul').repeat(addCodeStep).wait(stepTimeout).until(options.step.length);

function addCodeStep(i) {
   this.append('<li>'+options.step[i].name+'-'+options.step[i].age+'</li>');
}

function stepTimeout(i) {
   return options.step[i].time;
}

function stop() {
   $('#target ul').unwait();
}
于 2012-09-14T11:35:47.140 に答える