js中的回调函数的理解

时间：2023-01-14 00:20:50

一，常见的但是不是特别注意的回调方法。

1.1，ajax

$.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){
//请求成功后调用的回调函数
}
});

回调就是现在还不确定用的是哪个方法，只有当用到的时候，或者数据返回的时候我才知道用的哪个方法，在众多方法中选择一个。

1.2，onclick事件

$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});

正如你在前面的例子中看到的，我们将一个函数作为参数传递给了click方法。click方法会调用（或者执行）我们传递给它的函数。这是Javascript中回调函数的典型用法，它在jQuery中广泛被使用。

1.3，foreach事件

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

一次，注意到我们讲一个匿名函数（没有名字的函数）作为参数传递给了forEach方法。

二，案例

2.1，案例一

如果你直接在函数a里调用的话，那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处：当你a(b)的时候函数b就成了回调函数，而你还可以a(c)这个时候，函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。下面是代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="GBK" />
<title>回调函数(callback)</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var f;
function d(){
alert("我是Jquery定义的函数d");
}
var e = function(){
alert("我也是Jquery定义的函数e");
}

function a(callback) {
alert("我是parent函数a！");
d();
if (typeof callback === "function"){
//alert(callback);
callback();
}
}
function b(){
alert("我是回调函数b");

d();
e();
f();
}
function c(){
alert("我是回调函数c");
d();
e();
f();
}
function test1() {
a(b);
}
function test2() {
a(c);
}
$(function(){
f = function(){
alert("我是回调函数f");
}
});
</script>
</head>
<body >
<h1>学习js回调函数</h1>
<button onClick=test1()>test a(b)</button>
<button onClick=test2()>test a(c)</button>
<p>应该能看到调用了两个回调函数</p>
<p > </p>
</body>
</html>

这个案例其实最好理解，就是用现在方法a调用的是一个函数，而我现在不知道这个函数是谁，因为它一直在变化的，所以我就定义了一个回调函数，当确定下来这个函数是谁的时候我把函数传进来，这时候就可以确定这个函数是谁了。

2.2，案例二。

再来看另一个案例

//callback，参数的最后一项，将会是我们在上面定义的genericPoemMaker函数
function getUserInput(firstName, lastName, gender, callback) {
var fullName = firstName + " " + lastName;

// Make sure the callback is a function
if (typeof callback === "function") {
// Execute the callback function and pass the parameters to it
callback(fullName, gender);
}
}

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);

function genericPoemMaker(name, gender) {
console.log(name + " is finer than fine wine.");
console.log("Altruistic and noble for the modern time.");
console.log("Always admirably adorned with the latest style.");
console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}

/ 输出
/* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/

我们调用了相同的getUserInput函数，但是这次想完成一个完全不同的任务。

看下面的代码

unction greetUser(customerName, sex) {
var salutation = sex && sex === "Man" ? "Mr." : "Ms.";
console.log("Hello, " + salutation + " " + customerName);
}

// 将greetUser作为一个回调函数
getUserInput("Bill", "Gates", "Man", greetUser);

// 这里是输出
Hello, Mr. Bill Gates

三，自己的理解

就是相同的方法，参数比变量一样，函数一样(在用同样的方法时候赋给的函数名字就是callback的函数名字)，但实际上函数名字是不一样的，就相当于变量名字是一样的，但是每次变量的内容是不一样的道理。

这时候传递什么样的函数就会输出什么样的结果。

$('#provinceCity_fu').click(function(){
var $this = $(this);
new Picker({
"title": '请选择地区',//标题(可选)
"defaultValue": $(this).text(),//默认值-多个以空格分开（可选）
"type": 3,//需要联动级数[1、2、3]（可选）
"data": cityData,//数据(必传)
"keys": {
"id": "Code",
"value": "Name",
"childData": "level"//最多3级联动
},//数组内的键名称(必传，id、text、data)
"callBack": function (val) {
//回调函数（val为选择的值）
$this.text(val);
}
});
});

这也就解释了上面的代码，当childData级数传递的不一样的时候其实调用的函数是不一样的返回的结果自然不一样，结果就可以出来1,2,3级联动不同的效果了。

js中的回调函数的理解的更多相关文章

  1. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  2. JS中的回调函数实例浅析

    本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...

  3. 关于js的callback回调函数的理解

    回调函数的处理逻辑理解:所谓的回调函数处理逻辑,其实就是先将回调函数的代码 冻结(或者理解为闲置),接着将这个回调函数的代码放到回调函数管理器的队列里面. 待回调函数被触发调用的时候,对应的回调函数的 ...

  4. 关于js中的回调函数callback

    来源于:http://www.jianshu.com/p/6bc353e5f7a3 前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制 ...

  5. 关于 js 中的回调函数 callback

    本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原 ...

  6. 关于js中的回调函数callback，通俗易懂

    前言 其实我一直很困惑关于js 中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来 ...

  7. js中的回调函数 和promise解决异步操作中的回调地狱问题。

    回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...

  8. js中的回调函数

    1.你定义的 2.你没有调用 3.但是最终他执行了 例子: 定时器回调函数 setTimeout(function(){ },100); dom元素的回调函数 document.getElementB ...

  9. js中立即执行函数写法理解

    在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数, 并后面加个括号立即调 ...

随机推荐

  1. 【BZOJ-4726】Sabota？ 树形DP

    4726: [POI2017]Sabota? Time Limit: 20 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 128  Solved ...

  2. POJ 3176 Cow Bowling

    Cow Bowling Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13016   Accepted: 8598 Desc ...

  3. Vue从零开始（一）

    一.什么是Vue? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...

  4. Spring切面优先级

    项目中有两个切面,这两个切面都作用于同一个方法,哪个先执行哪个后执行呢,所以要定义一个切面的优先级 import java.util.Arrays; import org.aspectj.lang.J ...

  5. Sublime Text &lbrack;Decode error - output not utf-8&rsqb;

    改Sublime Text的python build的设置.将其编码设置为cp936. 打开Python.sublime-build文件,并添加”encoding”:”cp936″这一行,保存即可 S ...

  6. github上总结的python资源列表【转】

    Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...

  7. angular学习2

    1.为了在angular里面使用bootstrap,可以如下操作 (1)停止正在运行的终端指令:ctrl+c (2)在终端里面输入:npm install bootstrap --save (3)在V ...

  8. 2&period;6 利用FTP上传所有文件

    利用FTP上传所有文件 import os,ftptools class UploadAll(ftptools.FtpTools): #继承上一篇写的Ftptools '''upload an ent ...

  9. right spindle supply short to gnd-- compact version

    hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...

  10. DataTable&period;Compute&lpar;&rpar;

    一.DataTable.Compute()方法說明如下 作用:          计算用来传递筛选条件的当前行上的给定表达式. 格式為:          Object Compute (string ...

相关文章