What is a callback function? Before learning, I really didn’t know how to use and function the js callback function. In this article, I will introduce the example of the callback function that I am learning to the students. Students who need to know more can refer to it for reference.
Principle of callback function:
I’m leaving now and I’ll let you know when I arrive”
This is an asynchronous process. During the process of "I go" (function execution), "you" can do anything. "Arrived" (function execution completed) "notify you" (callback) after the process
Example
1.Basic method
<script language="javascript" type="text/javascript">
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);
</script>
Or use anonymous function form
<script language="javascript" type="text/javascript">
function dosomething(damsg, callback){
alert(damsg);
if(typeof callback == "function")
callback();
}
dosomething("回调函数", function(){
alert("和 jQuery 的 callbacks 形式一样!");
});
</script>
2. Advanced methods
Use the call method of javascript
<script language="javascript" type="text/javascript">
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`
</script>
Pass parameters
<script language="javascript" type="text/javascript">
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`
</script>
Use javascript’s apply to pass parameters
<script language="javascript" type="text/javascript">
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`
</script>
Example
//If the data source provided is an integer, which is the score of a certain student, when num0, it will be processed by the high-level layer.
//Copy the following function and save it as 1.js
function f(num,callback){
if(num<0) {
alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}else if(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试！");
}else{
alert("调用高层函数处理!");
callback();
}
}
//Save the following test.html file and 1.js in the same directory:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="1.js" type="text/javascript"></script>
<title>无标题文档</title>
<script type="text/javascript">
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!"
}
</script>
</head>
<body>
<p>
回调函数示例:当学生成绩score<=0分时候，由底层处理；当score>0时，由高层处理。
</p>
请输入学生成绩<input type="text" id="score">
<input type="button" onClick="test()" value=" 看看结果">
<p id="pp"></p>
</body>
</html>
The following are additions from other netizens:
Callback mode in javascript:
looks like:
function writeCode(callback){
//执行一些事物，
callback();
//...
}
function intrduceBugs(){
//....引入漏洞
}
writeCode(intrduceBugs);
We pass the application of the function to writeCode() and let writeCode execute it at the appropriate time (called after returning)
Let’s look at a not-so-good example first (it will be reconstructed later):
//模拟查找页面中的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<max;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';});
java回调函数怎么写Jan 09, 2024 pm 02:24 PMjava回调函数的写法有：1、接口回调，定义一个接口，其中包含一个回调方法，在需要触发回调的地方，使用该接口作为参数，并在合适的时机调用回调方法；2、匿名内部类回调，可以使用匿名内部类来实现回调函数，避免创建额外的实现类；3、Lambda表达式回调，在Java 8及以上版本中，可以使用Lambda表达式来简化回调函数的写法等。
Java中回调函数的基本语法与应用Jan 30, 2024 am 08:12 AMJava回调函数的基本写法和使用方法引言：在Java编程中，回调函数是一种常见的编程模式，通过回调函数，可以将某个方法作为参数传递给另一个方法，从而实现方法的间接调用。回调函数的使用，在事件驱动、异步编程和接口实现等场景中非常常见。本文将介绍Java回调函数的基本写法和使用方法，并提供具体的代码示例。一、回调函数的定义回调函数是一种特殊的函数，它可以作为参数
Vue组件通信：使用回调函数进行组件通信Jul 09, 2023 pm 07:42 PMVue组件通信：使用回调函数进行组件通信在Vue应用程序中，有时候我们需要让不同的组件之间进行通信，以便它们可以共享信息和相互协作。Vue提供了多种方式来实现组件之间的通信，其中一种常用的方式是使用回调函数。回调函数是一种将一个函数作为参数传递给另一个函数并在特定事件发生时被调用的机制。在Vue中，我们可以利用回调函数来实现组件之间的通信，使得一个组件可以在
深入解析JavaScript中的回调函数（同步和异步）Aug 04, 2022 am 10:05 AM回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念，同时帮你区分两种回调：同步和异步。
事件驱动编程中Java回调函数的应用领域Feb 01, 2024 am 09:07 AMJava回调函数在事件驱动编程中的应用回调函数简介回调函数（callbackfunction）是一种在某个事件或操作发生后被调用的函数。它通常用于事件驱动编程中，其中程序在等待事件发生时会阻塞。当事件发生时，回调函数就会被调用，程序就可以继续执行。在Java中，回调函数可以通过接口或匿名内部类来实现。接口是一种定义函数签名的机制，它允许一个类实现另一个类的
如何在 Golang 中使用数据库回调函数？Jun 03, 2024 pm 02:20 PM在Golang中使用数据库回调函数可以实现：在指定数据库操作完成后执行自定义代码。通过单独的函数添加自定义行为，无需编写额外代码。回调函数可用于插入、更新、删除和查询操作。必须使用sql.Exec、sql.QueryRow或sql.Query函数才能使用回调函数。
分析常见的Python回调函数应用场景Feb 02, 2024 pm 09:34 PMPython中常见的回调函数应用场景分析，需要具体代码示例回调函数是指在编程中，将一个函数作为参数传递给另一个函数，并在某个特定的事件发生时执行这个参数函数。回调函数广泛应用于异步编程、事件处理、GUI编程等领域。本文将分析Python中常见的回调函数应用场景，并给出相关的具体代码示例。异步编程在异步编程中，回调函数常用于处理异步任务的结果。当需要执行一个耗
C++ 函数指针与回调函数的对比Apr 18, 2024 pm 12:06 PM函数指针和回调函数都是实现回调机制的工具。函数指针在编译时创建，不可修改，需要显式调用；而回调函数在运行时创建，可动态绑定到不同函数，由回调函数自动调用。因此，函数指针适合静态回调，而回调函数适合动态回调。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
Zend Studio 13.0.1
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
