1

javascript と jquery lib の仕組みについて少し混乱しています。例。クリックイベントで、画像をフェードさせてソースを変更し、フェードインしたいのですが、頭の中でこれがうまくいくはずだと考えました。1 つのコードを実行してから、次のコードを実行します。ただし、コードを切り替えてから実行する傾向があります。なぜこれが起こるのか、そして解決策があるかどうかを理解するのを手伝ってくれる人がいますか。

$('.under_box').click(function(){
var main_source=$(this).attr("src");
$("#main_image").fadeTo(300,0);
$("#main_image").attr("src",main_source).queue();
$("#main_image").fadeTo(500,1);
4

2 に答える 2

1

これらの関数は、コードの次の行が開始する前に完了するのを待たないという意味で、非同期になる傾向があります。次のようなコールバック関数を使用してみることができます。

   $("#main_image").fadeTo(300,0, function(){
        $("#main_image").attr("src",main_source).queue();
        $("#main_image").fadeTo(500,1);
    });

アイデアは、fadeToが完了するとコールバック関数が実行されるというものです。

于 2012-03-12T01:22:23.187 に答える
0

JavaScrypt は非ブロッキングであることが知られているため、この場合の最善の方法は、何かの後に何かをするのを待ちたい場合にコールバックを設定することです。

$(function(){
    var main_image = $("#main_image");
    $('.under_box').on('click', function(){
        var main_source=$(this).attr("src");
        main_image.fadeTo(300,0, function(){
            main_image.attr("src",main_source);
            main_image.fadeTo(500,1);
        });
    });
});

また、この方法で保存して、DOM へのジャンプを減らす必要があることに注意してください。

var $main_image = $("#main_image");

jquery オブジェクトを常にフェッチするのではなく、メモリに保持します。

于 2012-03-12T01:40:54.777 に答える