1

変数の変化を監視し、特定の値で関数をトリガーするより良い方法はありますか?

現時点で私はこれを持っています -

$(window).on('scroll', function() {
    if(scrolledYet == "ready" && positionNow < 20){
        fadeOutIntro();
        scrolledYet = "yes"; 
    }
    if(scrolledYet != "ready" && positionNow < 840  && positionNow > 20 ){
        $('.logoBlock,.introScrollIcon, .introText').fadeIn('700')
           setTimeout(function() {  $('#nav').fadeIn('1000');},1000);
          setTimeout(function() {introOnOff = "on";},100)
    }
});

positionNow 変数は別の関数で設定され、現在のスクロール位置を格納します。このスクリプトを構成するより良い方法はありますか

4

3 に答える 3

1

これをすべてCSSで実行しないのはなぜですか、もっと速いかもしれません。

絶対に配置された非表示の要素がある場合、ユーザーがその要素をスクロールすると、アニメーションをトリガーできるホバー状態が作成されます。（正しく機能するには、これのcssの子孫としてページ要素の多くが必要になる場合があります）

JSでそれを行う必要がある場合は、速度を向上させるためにできることがいくつかあります。これで、スクロールするたびに新しい関数を作成できます。ブラウザがページの読み込み時にJSをJITコンパイルするだけでよいようにJSを設定してみてください。そのため、これらの関数をハンドラーとして参照してください。また、jQuery cssの選択は1回だけ行うことができます。この場合、IDを使用しています。これはおそらくかなり高速なルックアップですが、を実行した場合、'[data-name=data-value]'実際にはかなり遅いクエリです。

また、これを分割して、[20px-840px]リージョンに出入りするときに2つの新しいイベントをトリガーし、underscore.jsを使用してそれらをデバウンスすることもできます。 http://underscorejs.org/#debounce

私はこれがかなり高レベルであることを知っています、そして私は特定のコードを書きませんでした、しかし私はそれが役立つことを願っています。

于 2013-01-08T17:05:27.587 に答える
1

イベントバインディングと伝播を使用して変数値を監視し、目的の値に達した場合は別のイベントをトリガーしてみませんか? 基本的な考え方は以下のデモ「オブジェクト」を使用していますが、「positionNow」またはアクセス可能なプロパティ (「ウィンドウ」オブジェクトを含む) を既に持っている可能性のあるオブジェクトの他の種類の変数に適用できます。

例: jsfiddle - http://jsfiddle.net/vepWE/1/

JS:

$("#b").data('myscrollposition', 100);
$("#c").data('myscrollposition', 101);
$("#d").data('myscrollposition', 100);

function f(evt)
{
     $(this).val("desired event triggered");
}

function change(evt)
{
    var m = $(this).data('myscrollposition');
//equivalent to above: var m = $(evt.currentTarget).data('myscrollposition'); 
     if(m == 100)
     {
          $(this).trigger('valuereached');
     }
}

$(".des").on('change', change);
$(".des").on('valuereached', f);
$(".des").trigger('change');

HTML:

<input class = "des" id = "b"></input>
<input class = "des" id = "c"></input>
<input class = "des" id = "d"></input>

注:要素がまだページに存在しない場合は、次の構文を使用する必要があることにも

$(".parentcontainer").on("myevent", '.listenforthisalways', function(event){
  alert($(this).text());
});

また、ページの後半で「listenforthisalways」のクラスを持つ要素を追加しても機能します (上記の例では、クラス「parentcontainer」を持つコンテナーの子孫として追加された場合のみ)。ページ上の要素。

クラス「myFOO」を持つ html 要素の追加をページのどこかでリッスンし、後でページに追加された場合でも、イベント「myevent」をその要素の関数「myfunction」にバインドする別の例は、次のようになります。 :

   function myfunction(evt)
   {
     //whatever
   } 

  $(document).on("myevent", '.myFOO', myfunction);

お役に立てれば！

于 2013-01-08T16:38:07.363 に答える
0

はい、そうですが、どこでも利用できるとは限らない高度な JavaScript のものです (ヒント MSIE)。

var o = {_positionNow: 1};
Object.defineProperty(o, "positionNow",
                      {get: function() { return this._positionNow },
                       set: function(positionNow) { this._positionNow = positionNow },
                       enumerable: true,
                       configurable: true});

もちろん、汚いものが好きな場合oなど、どのような状況でもかまいません。windowまたは、JavaScript 1.8.5 以降から離れたい場合は、いくつかの KVO (Key Value Observing) パターンを検索してください。

definePropertyに関するその他のドキュメント。

于 2013-01-08T16:23:15.897 に答える