JS回調函數(callback)

時間 2019-11-11

原文原文鏈接

在使用Jquery的時候，用到Callback()，回調函數的概念。並且不少。javascript

好比：html

$.ajax({
    url:"test.json",
    type: "GET",
    data: {username:$("#username").val()},
    dataType: "json",
    beforSend:function(){ 
         // 禁用按鈕防止重複提交
        $("#submit").attr({ disabled: "disabled" });
    }, 
    complete:function(msg){ 
        //請求完成後調用的回調函數（請求成功或失敗時均調用）
    } , 
    error:function(msg){ 
        //請求失敗時被調用的函數 
    } , 
    Sucess:function(msg){ 
        //請求成功後調用的回調函數 
    } 
});

回調函數你們都會用，只是Jquery封裝了以後，不能讓你們明白回調函數的真正使用。

JS Api 裏這樣解釋：A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

固然咱們能夠在JS當中來真正嘗試一下回調函數的神奇。

若是你直接在函數a裏調用的話，那麼這個回調函數就被限制死了。可是使用函數作參數就有下面的好處：當你a(b)的時候函數b就成了回調函數，而你還能夠a(c)這個時候，函數c就成了回調函數。若是你寫成了function a(){...;b();}就失去了變量的靈活性。下面是代碼：

<html>

<head>

<title>回調函數(callback)</title>

function a(callback) {

alert("我是parent函數a！");

alert("調用回調函數");

//callback();

$("#id").load("page參數");

d();

alert(callback);

}

function b(){

alert("我是回調函數b");

$("#id").load("page參數");

e();

}

function c(){

alert("我是回調函數c");

$.ajax({

...

});

d();

}

function test() {

a(b);

a(c);

}

$(document).ready(function(){

function d(){

alert("我是Jquery定義的函數");

}

var e = function(){

alert("我也是Jquery定義的函數")

}

</script>

</head>

<body>

<h1>學習js回調函數</h1>

<button onClick=test()>click me</button>

<p>應該能看到調用了兩個回調函數</p>

</body>

</html>

估計你們也看到了，我在a(callback)，b(),c()方法裏都寫了Jquery的ajax函數，注意，這裏是ajax的函數。是有區別的，我分別調用了內置函數，和本身定義的函數。 區別就在這裏，由於Jquery和JS用的callback是同樣的，互通的，因此在這裏，Jquery的內置函數會被調用了。

可是本身定義的函數是不會被識別的，甚至會報沒有這個function.

(後面這段看得不是很理解，但願看到的高手請分析下)

因此在回調的時候注意這點。