jQuery - setInterval（）関数は、遅いです。

Question

これはうまくいきましたが、突然停止しましたが、何が変更されたのか分かりません。

概要：我々はいくつかのhtmlを持っている...

<div id="side"> 
    <ul id="photos"> 
    <li><img... </li> 
    <li><img... </li> 
    <li><img... </li> 
    ... 
    </ul> 
</div> 

は含ま<div>とposition;absoluteのそれよりも大きい高さを持つ<ul>があり、その中に、一定の高さ、position:fixedとoverflow:hiddenのdiv要素があります。ユーザーが#sideの底に向かって移動すると、#photosがスクロールアップするという考えがあります。私はそれがより速く〜5pxをスクロールするように設定して、エッジに向かってゆっくり〜1pxを中央に向かってスクロールします。

問題は、ゆっくりと動きます。 1ピクセル上に移動してから別のピクセルを待って上に移動するようにします。私は間隔を10に設定しました。これはかなり速くなければなりませんでした。以前はかなりうまく動いていました。

ここにスクリプトがあります。relivant関数は、最後にsetInterval()であり、残りは、場合によっては提供されています。あなたの代わりに、ブールtrueの文字列を渡しているので

var move_up, move_dn, 
    hoverInterval, 
    yPos,   //y position on slider 
    objHeight,  //Height of slider 
    posPercent;  //y axis percent on the slider 


function movable(){ 
    container = $("#side"); 
    slider = $("#photos"); 
    position = slider.position().top; 
    limit  = 0 - slider.height() + container.height() 
    if(position >= 0) 
     {return('top');} 
    else if(position <= limit) 
     {return('bottom');} 
} 

function scroll_div(a){ //a=amount to move 
    $("#photos").animate({"top":"-="+a+"px"},"slow","easeOutExpo").stop("true","true"); 
} 

function move_div(){ 
    place = movable(); 
    move = (Math.pow(((100*yPos)/objHeight)-50,3)/20000); 
    if (move < 0){ 
     if (place != 'top'){ 
      scroll_div(move) 
     } 
    }else{ 
     if (place != 'bottom'){ 
      scroll_div(move) 
     } 
    }; 
} 

$("#side").mousemove(function(e){ 
    objHeight = this.offsetHeight 
    yPos = e.pageY - this.offsetTop; 
    //offset = parseFloat($("#photos").css("top")) superfluous 
}); 

$("#side").hover(
    function(){hoverInterval = setInterval(move_div,10)}, 
    function(){clearInterval(hoverInterval) 
    }); 

Answer 1

.stop("true", "true")へのあなたの呼び出しは、おそらく機能していません。 .stop()のjQueryコードを見ると、最初の引数が文字列の場合、jQueryはキュー名を渡していると考えます。 "true"という名前のキュー名がないので、.stop()の呼び出しはおそらく何もしていません。たとえそれがうまくいったとしても、それは前にあって、.animate()へのあなたの電話の後ではありません。これは、実際には600ms = 60のアニメーションがすべて同時に実行されていることを意味します。これは、10msごとに新しい600msのアニメーションを開始するためです。一度に60個のアニメーションを実行することは、おそらくあなたを悩ますことの一部です。

$("#photos").stop(true, true).animate({"top":"-="+a+"px"},"slow","easeOutExpo"); 

をそして、あなたはどちらか.hover()にsetInterval()コールを取り除くか、あなたがしている600msのアニメーションとの互換性が何かに​​その時間を変更を取得する必要があります。

あなたのアニメーションの呼び出しは次のようになります。やって600msのアニメーションを停止して再起動すると、10msごとにあなたがしたいことは起こりません。