首頁 > web前端 > js教程 > jQuery如何自訂一個回呼函數

jQuery如何自訂一個回呼函數

伊谢尔伦
發布: 2017-06-16 14:59:59
原創
2297 人瀏覽過

首先從callback的字面翻譯「回呼」 可以理解這是一個函數被調用的機制

#當我們遇到一個名詞首先可能是百度谷歌搜尋看官方是怎麼解釋的

下面是維基百科對回呼的定義:

a callback is a piece of executable code that is passed as an argument to other code which is expected to call back (execute) the argument at some convenient time

硬翻譯: 一個回呼函數是作為另一個函數的參數的一個可執行的程式碼段這個程式碼段在方便的時間來執行

通俗形象的解釋: 把函數f2當作一個參數傳給函數f1 並且在f1裡適當的時間執行f2(下面的所有例子我都用f1,f2表示)

所以我們可以得到一個這樣的回調函數模式

function f1(f2) {    //f1要执行的一些代码
    if (f2 && typeof(f2) === "function") { //对f2做判断是否存在并且是一个函数        f2();
    }
}
登入後複製

這裡要注意兩點參數裡的f2是一個指向f2這個函數的指標所以f2後面不能加括號

而f1內部的f2後面要有括號因為這時我們要呼叫執行f2 ,所以要寫f2()

我們把這個模式實例化看下他的執行結果

声明函数function f1(f2) {
alert("我是f1");if (f2 && typeof(f2) === "function") { //写上判断是个好习惯f2()
}
}
执行
f1(function() {
alert("我是f2");
})
结果://"我是f1",“我是f2”
登入後複製

我們看下整個函數執行的過程 當呼叫f1(function(){alert("我是f2 ");})的時候

先把一個匿名函數傳給了f1() 而這個匿名函數就是宣告函數裡的參數f2 javascript程式是從上到下執行先執行了alert("我是f1"); 然後執行了f2();

那我們可不可以這樣寫呢

function f1(f2) {    alert("我是f1");    if (f2 && typeof(f2) === "function") {  
        f2()
    }    alert("我又是f1 哈哈");
}
执行
f1(function(){
    alert("我是f2");
})//结果:我是f1 ,我是f2,我又是1 哈哈
登入後複製

再看對callback的定義,我們可以讓callback在我們想要執行的時候執行,不影響f1本身的執行流

但為了封裝和美觀大多數我們會這樣寫

function f1(f2){ 
if (f2 && typeof(f2) === "function") {  
settimeOut(function(){f2()},1000) ;//f1执行1s后f2执行}
}function f2(){/**/}
f1(f2);
登入後複製

其實回呼函數沒那麼複雜的,在js裡面,function你可以當成一個普通的參數。只要後面加上(),就表示呼叫這個函數了。

再看看下面這個例子

$(function(){
    function funcname(param){
        //do something
         
        //callback
        param.callback();    
    }
 
    //调用
    funcname({
        callback:function(){
            alert('callback do'); 
        }   
    });      
});
登入後複製

從上面的例子也可以看出來,其實每定義一個函數,都會將函數入容器的棧,index就是函數名。預設是在window下,因此可以把字串丟過去,在window下也可以透過字串呼叫到這個回呼函數。

帶參數的話,可以採用上面的方式。

例如jQuery裡的一個例子

$("#div1").fadeOut("fast",functin(){
    $("#div2").fadeIn("slow");
})
登入後複製

讓#div快速隱藏然後讓#div2漸漸顯示,在jQuery裡有大量的callback函數

並且有一個專門的有一個方法callbacks來管理

jQuery.Callbacks = function( options ) {...}
登入後複製

最後我說下我最近在專案中用到的callback吧

hybrid app 功能大概就是我向ios發送一個請求ios返回給我的json資料然後我將返回的資料解析插入到web頁面上

//首先我写一个javascript和ios通信callback函数(简化)getData(callback){
settimeOut(function(){callback(iso_return)},100);
}//然后我向ios发送一个请求function getSinersReuest(){window.location.href="vvmusic://....callback=getSinersData"}/*然后ios截获url中的callback执行getData(getSinersData)返回给我数据;我的getSinersData是我想把ios返回的json插入到页面显示8*/getSinersData(iso_return){
.........
}//当页面加载的时候调用window.onload=function(){
getSinersReuest();
}
登入後複製

以上是jQuery如何自訂一個回呼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板