1

私はこのようなスライダーを持っています:

             ________
------------|        |---------------------------------------
   :    <-- | slider | -->    :        :        :        :
------------|________|---------------------------------------

スライダーをドラッグ可能にするためにjQueryUIを使用しています。これは正常に機能します。

問題は、スライダーがセクションの境界(で示される)を越えるたびに関数を実行していることです:。この関数の実行には約30msかかります(DocumentFragmentを作成してドキュメントに挿入します)。この間、ブラウザーはイベントに応答しないため、jQuery UIはスライダーの位置の調整を停止し、ドラッグが途中で終了します(ユーザーはマウスボタンを離して新しいドラッグを開始する必要があります)。これにより、スライダーがぎくしゃくしてバグのある感じになります。

この問題の解決策はありますか?

編集:問題を示す簡単なフィドルを作成しました。ドラッグは、slow関数の実行中は基本的に一時停止しますが、その後再開することに注意してください。これにより、ドラッグイベントが短くなる原因となっている、より複雑なシナリオについて何かがあるのではないかと思われます(おそらく、DOM操作によってスライダーの位置が一時的に変化している可能性があります)。

編集:さらに調査した後、私は問題を理解することにずっと近づいています。DOM操作コードには、のような行が含まれています$('.droppable').remove()。これにより、一致する要素がバインドされているイベントハンドラーをデタッチし、関連するデータを削除した後、それらの要素がDOMから削除されます。代わりに使用する場合.detach()、動作は上記の単純なフィドルと同じです。クリーンアップ中に何か厄介なことが起こっています。

4

1 に答える 1

0

jQueryまたはUnderscoreのdebounce関数、または同等のメソッドを使用して、100または200ミリ秒ごとに1回だけ関数を呼び出すことをお勧めします。

これは物事をスムーズにすることはありませんが、少なくとも彼らはバグを感じることはありません。

それについての興味深い記事

于 2012-08-12T20:11:57.783 に答える