0

HTML

<div id="answer" style="width:100px;height:50px;">Answer></div>

JS

$(function () {
    var answer = $('#answer');
    var sizeChangerHandle;

    function setBackground() {
        sizeChangerHandle = setInterval(changeConstantly, 1);
    }


    function changeConstantly() {

        answerHeight = answer.height();
        answerWidth = answer.width();
        answer.width(answerWidth + 1);
        answer.height(answerHeight + 1);
        setTimeout(function () {
            clearInterval(sizeChangerHandle);
        }, 300)

        // I am only using one of these codes, either the above or the below! I comment the other one out when I use one.
        answer.animate({
            width: 400,
            height: 200
        }, 300);

    }

    setBackground();
});

DIVを100px幅から400px幅に広げて、これに300スプリット秒かかるようにしようとしています。アニメーション機能を使用すると、完全に機能します。Divの幅は400ピクセルになり、300スプリット秒かかります。間隔を使用すると、DIVはその幅を176pxで停止します。これはなぜですか、実際には300スプリット秒実行する必要がありますか？

4

1 に答える 1

2

あなたのchangeConstantly間隔は実際にはミリ秒ごとに1回発火していません。MDNのメモからsetTimeout：

歴史的に、ブラウザはsetTimeout「クランプ」を実装setTimeoutします。「最小遅延」制限よりも小さい遅延の連続した呼び出しは、少なくとも最小遅延を使用するように強制されます。最小遅延DOM_MIN_TIMEOUT_VALUEは4ミリ秒です...

のMDNページではsetInterval、この4ミリ秒の制限が同様に適用されることを確認してsetInvervalいます。

したがって、間隔関数は300回ではなく、75回（300ミリ秒を4ミリ秒のインバーバルで割った値）しか実行されません。（または、76回実行される可能性があります。最後の間隔は、間隔がクリアされる直前に実行される可能性があります。）

解決策は、以上の間隔遅延を使用してコードを書き直し、各反復中に4倍以上成長さ4せることです。つまり、を使用します。<div>answer.height(answerHeight + 4);

于 2012-12-12T19:52:45.980 に答える