0

Javascript でベンダー プレフィックスを使用できないことがわかった後、独自のフェード ツー ブラーを作成しようとしました。スクリプトを実行してから約 5 ～ 10 秒後に、console.log呼び出しが 1 秒あたり約 1 回まで遅くなります。これは私の側の問題ですか？

ここに私が作ったコードがあります

var i = 0;
var iv = setInterval(function(){
    if(Number(i) > 2)
    {
        clearInterval(iv);
    }

    console.log(i);

    r = i.toFixed(2);

    $('#r').css('filter', 'blur(' + r + 'px)');
    $('#r').css('-webkit-filter', 'blur(' + r + 'px)');
    $('#r').css('-moz-filter', 'blur(' + r + 'px)');
    $('#r').css('-o-filter', 'blur(' + r + 'px)');
    $('#r').css('-ms-filter', 'blur(' + r + 'px)');

    i += 0.01;
}, 1);

そしてJSFiddle

JS が浮動小数点数を処理する方法だと思いますが、ぼかしをよりスムーズにする方法はありますか? iあたりになるとかなりビクビクし0.8ます。の 2 番目の遅延を修正するにはどうすればよいsetIntervalですか? 他の誰かがこれを再現できますか？

注意事項

2forループで同じことをしようとしているときに同じことが起こりましたが、ループが停止するまでページが役に立たなくなりました。

4

1 に答える 1

0

文字列 'blur(' + r + 'px)' の計算を JavaScript 変数にキャッシュし、不要な計算を保存することで、スクリプトを高速化できます。

$('#r') オブジェクトを JavaScript 変数にキャッシュすることも、jquery css の複数単語プロパティを使用することもできます: $('#r').css({propertyName : value , propertyName : value})

何かのようなもの：

    var calc = 'blur(' + r + 'px)';     
    $('#r').css({
        'filter' :  calc ,
        '-webkit-filter' : calc,
        '-moz-filter' : calc,
        '-o-filter' : calc,
        '-ms-filter' : calc
    });

ここで確認してください：http://jsfiddle.net/gMq3P/3/

于 2013-05-26T12:28:27.390 に答える