回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了，下面本文章把我在学习回调函数例子给各位同学介绍一下吧，有需了解的同学不防进入参考。

回调函数原理：

我现在出发，到了通知你”

这是一个异步的流程，“我出发”这个过程中(函数执行)，“你”可以去做任何事，“到了”(函数执行完毕)“通知你”(回调)进行之后的流程

例子

1.基本方法

function doSomething(callback) {

// …

// Call the callback

callback('stuff', 'goes', 'here');

}

function foo(a, b, c) {

// I'm the callback

alert(a + " " + b + " " + c);

}

doSomething(foo);

或者用匿名函数的形式

function dosomething(damsg, callback){

alert(damsg);

if(typeof callback == "function")

callback();

}

dosomething("回调函数", function(){

alert("和 jQuery 的 callbacks 形式一样!");

});

2.高级方法

使用javascript的call方法

function Thing(name) {

this.name = name;

}

Thing.prototype.doSomething = function(callback) {

// Call our callback, but using our own instance as the context

callback.call(this);

}

function foo() {

alert(this.name);

}

var t = new Thing('Joe');

t.doSomething(foo); // Alerts "Joe" via `foo`

传参数

function Thing(name) {

this.name = name;

}

Thing.prototype.doSomething = function(callback, salutation) {

// Call our callback, but using our own instance as the context

callback.call(this, salutation);

}

function foo(salutation) {

alert(salutation + " " + this.name);

}

var t = new Thing('Joe');

t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`

使用 javascript 的 apply 传参数

function Thing(name) {

this.name = name;

}

Thing.prototype.doSomething = function(callback) {

// Call our callback, but using our own instance as the context

callback.apply(this, ['Hi', 3, 2, 1]);

}

function foo(salutation, three, two, one) {

alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);

}

var t = new Thing('Joe');

t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`

例子

//假如提供的数据源是一整数,为某学生的分数,当num<=0,由底层处理,当n>0时由高层处理.

//将下面这个函数拷贝下来存盘为1.js

function f(num,callback){

if(num<0) {

alert("调用低层函数处理!");

alert("分数不能为负,输入错误!");

}else if(num==0){

alert("调用低层函数处理!");

alert("该学生可能未参加考试！");

}else{

alert("调用高层函数处理!");

callback();

}

}

//将下面这个test.html文件存盘与1.js在一个目录下：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

无标题文档

function test(){

var p=document.getElementById("pp");

pp.innerText="";

var num=document.getElementById("score").value;

f(num,function(){ //匿名高层处理函数

if(num<60) alert("未及格！");

else if(num<=90) alert("该生成绩优良！");

else alert("该生成绩优秀!"); })

pp.innerText="by since1978 qq558064!"

}

回调函数示例:当学生成绩score<=0分时候，由底层处理；当score>0时，由高层处理。

请输入学生成绩

下面是其它网友的补充：

javascript中的回调模式：

形如：

function writeCode(callback){

//执行一些事物，

callback();

//...

}

function intrduceBugs(){

//....引入漏洞

}

writeCode(intrduceBugs);

我们传递函数的应用给writeCode()，让writeCode在适当的时候来执行它(返回以后调用)

先看一个不怎么好的例子(后续要对其重构)：

//模拟查找页面中的dom节点，将查找到的节点存在数组里面统一返回

//此函数只用于查找不对dom节点做任何的逻辑处理

var findNodes = function(){

var i = 100000;//大量的循环，

var nodes = [];//用于存储找到的dom节点

var found;

while(i){

i -=1;

nodes.push(found);

}

return nodes;

}

//将查找找到的dom节点全部隐藏

var hide = function(nodes){

var i = 0,

max = nodes.length;

for(;i

//findNodes后面有括号代表立即执行，先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ;

nodes[i].style.display="none"

}

上面的方法是低效的，以为hide()必须再次遍历有findNodes()返回的数组节点，如何避免这种多余的循环呢。

我们不能直接在findNodes中对查询到的节点进行隐藏(这样检索就可修改逻辑耦合了)，那么他就不再是一个通用函数了。

解决方法是用回调模式，可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行

//重构findNodes以接受一个回调函数

var findNodes = fucntion(callback){

var i = 100000,

nodes = [],

found;

//检查回调函数是否可用调用的

if(typeof callback !== 'function'){

callback = false;

}

while(i){

i -= 1;

if(callback){

callback(found);

}

nodes.push(found);

}

return nodes;

}

//回调函数

var hide = function(node){

node.style.display = 'none ';

}

//找到后续节点并在后续执行中对其进行隐藏

findNodes(hide);//先执行findNodes然后执行hide，当然回调函数也可以在调用主函数时创建：findNodes(function(node){node.style.display = 'none';});