3

ページにいくつかのjQuery-ui範囲スライダーがあり、テーブル内の行を追加および削除し、スライダーをスライドさせたときにその値をスライダーの上に表示します。関数showDataは、完了する前にすべてのテーブル行をチェックして更新する必要があり、showData関数が返されるまで、スライドイベントは何も実行しないようです。このテーブルは潜在的に非常に大きくなる可能性があります（1000行以上）

スライダーの設定の1つは次のとおりです。

.slider({
    min: 0,
    max: 1250,
    step: 50,
    values: [0, 1250],
    range: true,
    slide: function (e, ui) {
        $('span.height').text(ui.values[0] +
                'mm - ' + ui.values[1] + 'mm ');
        showData('height', ui.values, 'range');
    }
});

私の問題は、低速のコンピューターを使用しているIEユーザーの場合、スライダーをスライドさせても、スライダーのハンドルの位置でさえも何も変化していないように見えることです。1秒以上後まで。

私がやりたいのは、スライド関数の$（'span.height'）。text（...の一部を実行し、UIスライダーハンドルを適切な場所（つまり、マウスの下）ですぐに更新することです。 。

次に、showData関数がたとえば300ミリ秒後に実行されたが、その時間内にスライドイベントが再度トリガーされなかった場合にのみ、完全になります。

スライダーの停止イベントにshowData関数を配置するだけですが、それはクライアントが望んでいることではありません。

jsfiddleに動作するバージョンを掲載しました：http：//jsfiddle.net/vcgAU/1/

どんな助けでもいただければ幸いです

ありがとう

4

1 に答える 1

5

現在のコールバックは非常に似ているため、それらをジェネリックにして遅延関数を介して実行できますが、異なるもの (高さ、幅、深さ) に影響するため、タイプごとにする必要があります。次のようなタイプごとの遅延関数を作成できます。

var timers = {};
function delayShowData(type, values) {
  clearTimeout(timers[type]);
  timers[type] = setTimeout(function() {
    $('span.' + type).text(values[0] + 'mm - ' + values[1] + 'mm');
    showData(type, values, 'range');
  }, 300);
}

次に、slideコールバックで、次のように代わりにこの関数を呼び出します。

slide: function (e, ui) {
    delayShowData('height', ui.values);
}

ここで動作するデモをテストできます。このセットアップでは、作成している変更のタイプのタイマーを保存するため、スライダーごとに効果的であり、間隔内で再度変更すると、タイマーがクリアされ、300ms タイマーがリセットされます...したがって、300ms だけそのままにしておくと、このタイプのshowData()が呼び出されます。

于 2010-09-12T09:49:34.057 に答える