0

ブログ投稿を保存する前に、新しいサムネイルをスタンプする doGET() 関数の実行を完了する必要があります。CALLBACK が必要だということを聞いたことがありますが、それがどのように機能するかを理解するにはあまりにも愚かだと思います :P doGET() 関数が完全に終了した後にボタンをクリックするにはどうすればよいですか?

    $('#xmlbutton').click(function() {
    doGET();
    document.getElementById("save-post").click();  
    })



    function doGET() {

    // Get the URL of featured image

    // Fetch the right Image URL from FEATURED image and rename it to the FOUR image instances... ;)
    var src = $('#set-post-thumbnail img').attr('src');
    var src = src.slice(0, -12);
    var imgsrc = src + ".jpg";

    var img1 = src + "_thumb_one.jpg";
    var img2 = src + "_thumb_two.jpg";
    var img3 = src + "_thumb_three.jpg";

    // Put Url of Thumbnail Images in the Boxes
    document.getElementById('imageurl').value = src ;
    document.getElementById('thumb_url_1').value = '<img src="' + img1 + '">' ;
    document.getElementById('thumb_url_2').value = '<img src="' + img2 + '">' ;
    document.getElementById('thumb_url_3').value = '<img src="' + img3 + '">' ;     


    // Save the Draggable info, please!
    var im1_top = document.getElementById('image_mover_1').style.top;
    var im1_left = document.getElementById('image_mover_1').style.left;             

    document.getElementById('image1_adjust_top').value = im1_top;
    document.getElementById('image1_adjust_left').value = im1_left;

    var im2_top = document.getElementById('image_mover_2').style.top;
    var im2_left = document.getElementById('image_mover_2').style.left;             

    document.getElementById('image2_adjust_top').value = im2_top;
    document.getElementById('image2_adjust_left').value = im2_left;

    var im3_top = document.getElementById('image_mover_3').style.top;
    var im3_left = document.getElementById('image_mover_3').style.left;             

    document.getElementById('image3_adjust_top').value = im3_top;
    document.getElementById('image3_adjust_left').value = im3_left;


    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange=function() //This part is actually executed last
    {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) // Was the request processed successfully?
       {
            document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
       }
    }


    // Write the XML url string
    var baseurl = "thumbgen.php?";

    var left1 = "&left1=" + document.getElementById('image_mover_1').style.left;
    var left2 = "&left2=" + document.getElementById('image_mover_2').style.left;
    var left3 = "&left3=" + document.getElementById('image_mover_3').style.left;

    var top1 = "&top1=" + document.getElementById('image_mover_1').style.top;
    var top2 = "&top2=" + document.getElementById('image_mover_2').style.top;
    var top3 = "&top3=" + document.getElementById('image_mover_3').style.top;

    var imgwrap1 = "&imgwrap1=" + parseInt(document.getElementById('image_mover_1').getElementsByTagName('img')[0].offsetWidth);
    var imgwrap2 = "&imgwrap2=" + parseInt(document.getElementById('image_mover_2').getElementsByTagName('img')[0].offsetWidth);
    var imgwrap3 = "&imgwrap3=" + parseInt(document.getElementById('image_mover_3').getElementsByTagName('img')[0].offsetWidth);        

    var height1 = "&height1=" + document.getElementById('no_1_image').style.height;
    var height2 = "&height2=" + document.getElementById('no_2_image').style.height;
    var height3 = "&height3=" + document.getElementById('no_3_image').style.height;


    var imgurl = "&imgurl=" + $('#image_mover_1 img').attr('src');
    console.log( 'imgurl ~ ', imgurl );

    var fullurl = baseurl + left1 + left2 + left3 + top1 + top2 + top3 + height1 + height2 + height3 + imgwrap1 + imgwrap2 + imgwrap3 + imgurl;
    console.log('fullurl ~ ', fullurl );                   


    xmlhttp.open('GET', fullurl );
    xmlhttp.send();

    };
4

4 に答える 4

3

が発生すると実行されるコールバックパラメータをdoGET関数に追加できます。doGETdesired event

function doGET(callback){
     .....
     // Event occurs here. So call it
     callback();
}

それを機能させるには、このように呼び出しますdoGET。

doGET(function(){
    console.log("my event occured")
});

あなたの場合、イベントはeverything is finished. 通常の関数呼び出しであれば、callback()の最後で を呼び出すことができますdoGET。しかし、あなたは ajax リクエストを送信しています。したがって、別の場所で起動したくない場合を除き、ajax が完了したときに呼び出す必要があります。このためcallback()に、 の関数の最後に追加しxmlhttp.onreadystatechangeます。このようなもの、

  xmlhttp.onreadystatechange=function() //This part is actually executed last
    {
       ...
       ...
       callback();  //call your callback method

    }
于 2013-07-20T06:54:52.503 に答える
1

Oboy、少し乱雑に見えるので、少し変更しました :

$('#xmlbutton').on('click', function() {
    doGET().always(function() {
        $("#save-post").trigger('click');  
    });
});

function doGET() {
    var src  = $('#set-post-thumbnail img').attr('src').slice(0, -12) + ".jpg",
        img1 = src + "_thumb_one.jpg",
        img2 = src + "_thumb_two.jpg",
        img3 = src + "_thumb_three.jpg",
        im1  = $('#image_mover_1').position(),
        im2  = $('#image_mover_2').position(),
        im3  = $('#image_mover_3').position();

    $('#imageurl').val(src);
    $('#thumb_url_1').val('<img src="' + img1 + '">');
    $('#thumb_url_2').val('<img src="' + img2 + '">');
    $('#thumb_url_3').val('<img src="' + img3 + '">');     
    $('#image1_adjust_top').val(im1.top);
    $('#image1_adjust_left').val(im1.left);
    $('#image2_adjust_top').val(im2.top);
    $('#image2_adjust_left').val(im2.left);
    $('#image3_adjust_top').val(im3.top);
    $('#image3_adjust_left').val(im3.left);

    var data = {
        left1   : im1.left, top1: im1.top,
        left2   : im2.left, top2: im2.top,
        left3   : im3.left, top3: im3.top,
        imgwrap1: $('img', '#image_mover_1').get(0).offsetWidth,
        imgwrap2: $('img', '#image_mover_2').get(0).offsetWidth,
        imgwrap3: $('img', '#image_mover_3').get(0).offsetWidth,
        height1 : $('#no_1_image').height(),
        height2 : $('#no_2_image').height(),
        height3 : $('#no_3_image').height(),
        imgurl  : $('#image_mover_1 img').attr('src')
    }

    return $.ajax({
        url : 'thumbgen.php',
        data: data
    }).done(function(data) {
        $('#sampleDiv').html(data);
    });
}
于 2013-07-20T07:02:22.013 に答える
1

メソッドで非同期の AJAX 呼び出しを行っているdoGEt()ため、メソッドが完了する前にクリックが発生します。

のようなコールバックメソッドを作成できます。

    $('#xmlbutton').click(function() {
    doGET(function(){
        document.getElementById("save-post").click();  
    });
    })



 function doGET(CallBack) {

    /*----your code ----*/


    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange=function() //This part is actually executed last
    {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) // Was the request processed successfully?
       {
            document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
            if(CallBack) CallBack(); //call your callback method
       }
    }

 /*----your code ----*/

    xmlhttp.open('GET', fullurl );
    xmlhttp.send();

    };

私はこれがあなたが望んでいたものだと思います..

于 2013-07-20T06:53:40.513 に答える
1

JavaScript のコールバックは、実際には、コードのある時点で渡して実行する単なる関数参照です。

シナリオのコールバックのスニペット/サンプル実装を次に示します。

$('#xmlbutton').click(function() {
    doGET(afterGET); // pass afterGET (the callback) to doGET 
    document.getElementById("save-post").click();  
});


// doGet now accepts a single parameter: the reference to the function that is called back.
function doGET(theCallback) { // notice "theCallback" is a variable/reference here, do not use ()

    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }

    xmlhttp.onreadystatechange=function() { //This part is actually executed last
        if (xmlhttp.readyState==4 && xmlhttp.status==200) { // Was the request processed successfully?
            document.getElementById("sampleDiv").innerHTML=xmlhttp.responseText;
            theCallback(xmlhttp.responseText); // execute the callback, in this example it is a reference to afterGET, use () to execute
        }
    }

    xmlhttp.open('GET', fullurl );
    xmlhttp.send();

};

// the function definition for the callback (what you want to do when it is done)
function afterGET(text) {
    console.log('complete.',text);
}

この例を拡張して、有益な引数をコールバックに渡すようにしました。これは本当に必要ありません。ボーナスと考えてください。

于 2013-07-20T06:54:46.163 に答える