快捷導(dǎo)航

JS中的回調(diào)函數(shù)實(shí)例淺析

更新時(shí)間：2018年03月21日 14:20:56 作者：badmoonc

這篇文章主要介紹了JS中的回調(diào)函數(shù),結(jié)合實(shí)例形式簡單分析了javascript回調(diào)函數(shù)的感念、功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JS中的回調(diào)函數(shù)。分享給大家供大家參考，具體如下：

在說回調(diào)函數(shù)之前，不妨先看一段代碼，相信有點(diǎn)js基礎(chǔ)的同學(xué)都能明白他的含義:

document.getElementById('demo').click=function(){
  alert(1);
};

這段代碼其實(shí)就是一段事件回調(diào)，這樣寫看的其實(shí)相對(duì)模糊一些，我們不妨看下接下來的代碼

document.getElementById('demo').addEventListener('click',function(){
    alert(1)
});

這兩段代碼的所做的事情其實(shí)相同，不同的只是寫法的差異，我們看這個(gè)addEventListener('eventName',callback)，addEventListener這個(gè)函數(shù)有兩個(gè)參數(shù)，第一個(gè)為事件名稱，第二個(gè)參數(shù)實(shí)際上就是回掉函數(shù)，按照書上來說回調(diào)函數(shù)的方式，函數(shù)中的參數(shù)既然可以是變量，那么他也可以是一個(gè)函數(shù)?？赡苷f到這里大家對(duì)回掉函數(shù)還是一臉懵逼。我們再看接下來這個(gè)例子。

function demo(a,b,callback){
    let c=a+b;
    callback(c);
};
demo(1,2,function(c){
    alert(c);//3
})

這段代碼定義了一個(gè)demo函數(shù)，這個(gè)函數(shù)有三個(gè)參數(shù)a,b,callback，我們在這個(gè)函數(shù)內(nèi)部聲明了一個(gè)局部變量c，然后執(zhí)行我們的callback（回調(diào)函數(shù)）,接下來執(zhí)行demo這個(gè)函數(shù)

這個(gè)函數(shù)的三個(gè)參數(shù)如上，在回掉函數(shù)中彈出的為3。這就是一個(gè)簡單的回調(diào)函數(shù)。而要想真正理解回調(diào)函數(shù)的意義，其實(shí)我覺得還是在于明白他的用途，只有明白他的用途了我們才可以真正的去理解他。

回調(diào)函數(shù)最多的應(yīng)用場景就是異步操作，因?yàn)楫惒降牟僮魑覀儾恢肋@個(gè)操作到底何時(shí)結(jié)束，那么我們后續(xù)執(zhí)行的代碼就無法按照應(yīng)有的流程走下去。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: