2

他の関数を呼び出すために使用できる JavaScript/jQuery 関数を作成しようとしています。または、ユーザーがブレークポイントのしきい値を超えてウィンドウのサイズを変更した場合、またはデバイスを横向きから縦向きに回転した場合に基づいて CSS/LESS を設定しようとしています。

現在、私は以下を使用しています：

$(window).on('resize', function() {
// IF/Switch Case statement, check current width of window is > mobile, or tablet, or desktop
    // Do stuff depending on which size the window is at currently.
// End if/Switch case.
}

しかし、これは理想的ではありません。ユーザーがウィンドウを大きくしたり小さくしたりしている間に関数が文字通り何度も実行される可能性があるため、必然的にユーザー エクスペリエンスに負担や遅延が生じるためです。

代わりに、ブレークポイントの変更時に起動する方法、または 1 秒または 2 秒ごとに onResize を実行する方法、またはユーザーがウィンドウのドラッグを停止した後に実行する方法はありますか?

そうすれば、処理強度はかなり低くなります。

Ps ブレークポイントと言うときは、モバイル、BigMobile、タブレット、Retina ディスプレイ、タブレットの幅設定があることを意味します。

しかし、単にモバイル、タブレット、デスクトップも妥協点になる可能性があります。

onResize で集中的な処理を行わずにブレークポイントの変更を検出するにはどうすればよいですか。これをどの方向に進めるかについてのヒントはありますか？

4

1 に答える 1

4

setTimeout と clearTimeout を使用します。

var t = null;

window.onResize(function() {
   if (t!= null) clearTimeout(t);

   t = setTimeout(function() {
       ...
   }, 500);
}}

ドラッグ中、タイムアウトは常にクリアされ、何も起こりません。ただし、ユーザーがドラッグを停止すると、最後の setTimeout が実行され、コードが実行されます。

于 2014-09-19T13:49:46.043 に答える