Javascript中的回調函數完成後如何觸發事件？

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

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

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

您可以將回調參數添加到您的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。如果這只是正常的函數調用，您可以在doGET的末尾撥打callback()。但是你正在發送一個ajax請求。所以它應該在Ajax完成時調用除非你想讓它在其他地方被解僱。爲此，在xmlhttp.onreadystatechange的函數的最後加上callback()。事情是這樣的，

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

    }