Question

我需要能够完成运行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();

    };

Answer 1

您可以向doGET函数添加回调参数，doGET在desired event发生后执行function doGET(callback){ ..... // Event occurs here. So call it callback(); }。

doGET

要使其正常工作，请拨打doGET(function(){ console.log("my event occured") });。

everything is finished

在您的情况下，活动为callback()。如果只是正常的函数调用，您可以在doGET的最后调用callback()。但是你发送了一个ajax请求。所以当ajax完成时应该调用它除非你想让它在其他地方被触发。为此，在xmlhttp.onreadystatechange中函数的最后添加xmlhttp.onreadystatechange=function() //This part is actually executed last { ... ... callback(); //call your callback method }。像这样的东西，

{{1}}

Answer 2

您正在使用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();

    };

我想这就是你想要的......

Answer 3

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);
}

我增强了这个例子，包括将一个信息性参数传递给回调。你真的不需要这个;把它当作奖金。

Answer 4

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);
    });
}

Javascript中的回调〜如何在函数完成后触发事件？

4 个答案: