详解JS中的回调函数

news/2024/7/19 14:23:26 标签: javascript, js

JS中的回调函数对于入门者来说是不容易理解的,我在学习过程中也吃了它的苦头。学习JS一段时间过后,我也比较熟悉回调函数,现在把自己的心得分享出来。

那么,到底什么是回调函数呢?为什么JS中要有这个概念呢?

先举一个生活中的栗子:大家送女朋友回家,到了小区门口,对女朋友说到家了给我打个电话然后我在打车回去。等了五分钟,女朋友到家了,给你打电话,之后你也打车回家。

这个栗子中,你打车回家 就是 回调函数 。女朋友回家的过程,其实就一个异步函数,这个异步函数执行完毕之后,打电话(调用回调函数),然后执行回调函数(打车回家)

下面举一个JS代码栗子:

javascript">    var num = 0
    num++
    console.log(num)
    //输出结果为:1

加入异步函数之后:

javascript">    var num = 0
    
    setTimeout(function () {
        num++
    }, 3000)

    console.log(num)
    //输出结果为:0

按照我们原本的目的,输出结果应该为num=1,可为什么还是0呢?
因为JS是一种异步执行语言,尽管计时器中将num自加了,但是JS不会死等时间结束再跳出函数,而是马上就会执行下一步语句(也就是输出num),但这时候3秒钟根本就没结束,num还没有自加,所以输出结果还是0。

大家也许会想,将计时器时间设置为0,会不会有效呢?

javascript">    var num = 0

    setTimeout(function () {
        num++
    }, 0)
    
    console.log(num)
    //输出结果为:0

不管用的,不论计时器时间多少,只要它还是个异步函数,JS事件机制就会把它压进异步函数队列,先执行完同步函数(也就是一些普通的语句),再执行异步函数。

若是想让他输出为1,该怎么办呢?这就需要回调函数(callback)

javascript">    var num = 0

    setTimeout(function () {
        num++
        callback()
    }, 3000)

    function callback() {
        console.log(num)
    }
    //输出结果为:1

这里的callback函数名可以随意取,如果没有其他的含义,推荐用callback。

此时再想想最开始的栗子,计时器3000毫秒(女朋友回家的过程)后执行num++,再调用回调函数 callback() (给你打电话),输出num(你打车回家)。

如果你在这片文章收获到了你想要的东西,记得点个赞哦~


http://www.niftyadmin.cn/n/1258013.html

相关文章

经历不可抗力是一种什么体验

郑昀 最后更新于2015/1/29关键词:空调、运维、电缆、DNS根域、DDoS、劫持、乌龙 本文档适用人员:研发和运维 提纲: 空调,挥之不去的噩梦 易断的缆线 硬件造成的网络中断 波及全国的DNS根域事故 地方流量劫持 杀毒软件等拦截 …

JS中for循环绑定事件

在网页中有五个按钮&#xff0c;需求为&#xff1a;点击按钮&#xff0c;将按钮的索引值输出。 初学JS时遇到的问题&#xff0c;今天学习bind方法时又想起来了&#xff0c;分享一下。 先看一下代码 var btns document.querySelectorAll(button)for (var i 0; i < btns.l…

Fitnesse FIT的使用

FIT是fitnesse使用的默认的引擎(SLIM的使用在上一篇文章中说明)&#xff0c;不需要特别声明即可使用执行表格测试&#xff0c;所有编写的fixture都需要继承Fit的Fitxture 编写测试用例前需要先声明class或者jar包所在的路径&#xff0c;才能找到所需要的fixture 使用关键字path…

四则运算网页终结版

主要思路&#xff1a;设计三个Jsp,分别是控制出题的参数&#xff0c;出题及输入题目答案&#xff0c;处理输入的答案。创建一个类包&#xff0c;将涉及到的方法连接数据库&#xff0c;处理数据库中表的数据&#xff0c;计算有无括号的整数运算&#xff0c;计算求余运算的整数运…

Cocoapods 版本更新与更新到指定版本

1.本地现有的Cocoapods的版本号是1.1.0.rc.2&#xff0c;想升级到最新版本 1、先切换gem源 gem sources --remove https://rubygems.org/ gem source -a https://gems.ruby-china.org 查看是否切换成功 gem source -l 打印出*** CURRENT SOURCES *** https://gems.ruby-china.o…

js引入方式

常用的方式有两种&#xff1a; 1.外部引入 <script src"js/jquery-3.5.1.js"></script>2.script标签中直接书写 <script>var x 10;function f() {console.log(x)} </script>注意点&#xff1a; 在<script></script>中&…

JavaWeb【二、Tomcat安装】

简版&#xff1a; 下载安装 http://tomcat.apache.org/download-80.cgi 环境变量 CATALINA_HOME-tomcat安装路径-【E:\apache-tomcat-8.5.13】 Eclipse配置&#xff1a; 1、jre路径 windows->preferences->Java->Installed JREs->选择希望使用的JRE路径【F:\Progra…

<!DOCTYPE html>是什么?

<!DOCTYPE html>其实就是告诉浏览器本网页的 文档模式 为 标准模式。 如果不加上这句话&#xff0c;浏览器会默认开启混杂模式&#xff0c;这是我们不提倡的&#xff0c;因为不同浏览器在此模式下的行为差异巨大。