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函数中，该参数在doGETadesired 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

您正在您的doGEt()方法中进行异步 AJAX 调用，这就是为什么在方法完成之前触发点击的原因。

你可以像这样做一个回调方法。

    $('#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 回答
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 回答