Detailed explanation of JS callback function use cases
This time I bring you JS callbackCallback functionDetailed explanation of use cases, what are the Notes when using JS callback callback function, the following is a practical case, let's take a look.
Callback functions are often used when using open source projects. If the callback functions are clarified, it will be of great help to us to understand the open source projects in depth.
Explanation of callback function Baidu Encyclopedia:
The callback function is a function called through the function pointer. If you pass a function pointer (address) as a parameter to another function, and when this pointer is used to call the function it points to, we say it is a callback function. The callback function is not called directly by the implementer of the function, but is called by another party when a specific event or condition occurs to respond to the event or condition.
It doesn’t seem that easy to understand. Let’s take a look at an example (Zhihu):
You go to a store to buy something, and what you want happens to be out of stock. So you left your phone number with the store clerk. After a few days, the store had the goods, and the store clerk called you. After receiving the call, you went to the store to pick up the goods. In this example, your phone number is called the callback function. When you leave your phone number with the store clerk, it is called the registration callback function. When the store has goods later, it is called the event associated with the callback. When the store clerk calls you, it is called the callback function. When you go to the store to pick up the goods, it is called responding to the callback event.
This is much easier to understand. When the clerk is created, he does not know who will come to the store to buy things. The clerk needs to deal with many different objects and needs to adapt to different types of objects. At this time, a callback function is needed.
Let’s use an example to understand the application scenario of the callback function:
Me needs to complete a task, calculate 1 1=?
If you want to complete this task yourself
The code is as follows:
HTML code
<p class="imgp"> <p class="search"> <input class="put" type="text" id="keyWord"/> <ul id="tipList"></ul> </p>
JavaScript Code
(function (){
$(function(){
$("#keyWord").on("keyup",function(event){
var keyCode = event.keyCode;
if(keyCode == 38|| keyCode ==40){
settingTipList(keyCode);
return false;
}
var keyWord = $(this).val();
getTipList(keyWord);
});
var index = -1;
function settingTipList(keyCode){
if(keyCode == 38){
index--;
}else{
index++;
}
var size = $("#tipList li").size();
index =index % size;
$("#tipList li").removeClass("active").eq(index).addClass("active");
var selectLiContent = $("#tipList li").eq(index).html();
$("#keyWord").val(selectLiContent);
};
//获取数据
function getTipList(keyWord){
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
var data = {
wd:keyWord,
cb:"hhh"
};
$.ajax({
url:url,
data:data,
type:"GET",
dataType:"jsonp",
jsonpCallback:"hhh",
success:function(data){
var tipList = data.s;
handleData(tipList)
},
error:function(error){
alert("接口出错")
}
});
}
});
function handleData(tipList){
var tipHTML= "";
for(var i in tipList){
var text = tipList[i];
tipHTML += "<li>"+text+"</li>"
}
$("#tipList").css({"opacity":"1"});
$("#tipList").html(tipHTML);
}
})()
//如果不写jsonpCallback、后面jsonpCallback“”空置、直接跳出“接口出错了。Note:
1. Use ajax to make JSONP cross-domain request, because the callback function name of the requested party cannot be modified. . There will be multiple different JSONP requests in this page, but their callback function names are all the same, _Callback. Think of setting the JSONP parameters of AJAX. But found it didn't work at all. Finally, I accidentally discovered that jsonpcallback is case-sensitive. Is jsonpCallback instead of jsonpcallback;
2. JSONP is a powerful technology for building mashups, but unfortunately, it is not a panacea for all cross-domain communication needs. It has some flaws, which must be carefully considered before committing resources to development. First, and most importantly, there is no error handling for JSONP calls. If the dynamic script insertion is valid, the call is executed; if it is invalid, it fails silently. There is no prompt for failure. For example, 404 errors cannot be caught from the server, and requests cannot be canceled or restarted. However, if there is no response after waiting for a while, ignore it. (Future versions of jQuery may have features to terminate JSONP requests) Another major drawback of JSONP is that it can be dangerous when used by untrusted services. Because the JSONP service returns a JSON response wrapped in a function call that is executed by the browser, it makes the host web application more vulnerable to a variety of attacks. If you plan to use JSONP services, it is important to understand the threats that can be posed.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
JS retains two decimal places for input number verification code
JS retains one digit and moves it backward Unless the number
The above is the detailed content of Detailed explanation of JS callback function use cases. For more information, please follow other related articles on the PHP Chinese website!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Detailed explanation of division operation in Oracle SQL
Mar 10, 2024 am 09:51 AM
Detailed explanation of division operation in OracleSQL In OracleSQL, division operation is a common and important mathematical operation, used to calculate the result of dividing two numbers. Division is often used in database queries, so understanding the division operation and its usage in OracleSQL is one of the essential skills for database developers. This article will discuss the relevant knowledge of division operations in OracleSQL in detail and provide specific code examples for readers' reference. 1. Division operation in OracleSQL
Detailed explanation of the role and usage of PHP modulo operator
Mar 19, 2024 pm 04:33 PM
The modulo operator (%) in PHP is used to obtain the remainder of the division of two numbers. In this article, we will discuss the role and usage of the modulo operator in detail, and provide specific code examples to help readers better understand. 1. The role of the modulo operator In mathematics, when we divide an integer by another integer, we get a quotient and a remainder. For example, when we divide 10 by 3, the quotient is 3 and the remainder is 1. The modulo operator is used to obtain this remainder. 2. Usage of the modulo operator In PHP, use the % symbol to represent the modulus
Detailed explanation of the linux system call system() function
Feb 22, 2024 pm 08:21 PM
Detailed explanation of Linux system call system() function System call is a very important part of the Linux operating system. It provides a way to interact with the system kernel. Among them, the system() function is one of the commonly used system call functions. This article will introduce the use of the system() function in detail and provide corresponding code examples. Basic Concepts of System Calls System calls are a way for user programs to interact with the operating system kernel. User programs request the operating system by calling system call functions
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Detailed explanation of Linux curl command
Feb 21, 2024 pm 10:33 PM
Detailed explanation of Linux's curl command Summary: curl is a powerful command line tool used for data communication with the server. This article will introduce the basic usage of the curl command and provide actual code examples to help readers better understand and apply the command. 1. What is curl? curl is a command line tool used to send and receive various network requests. It supports multiple protocols, such as HTTP, FTP, TELNET, etc., and provides rich functions, such as file upload, file download, data transmission, proxy
Learn more about Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Detailed explanation of Promise.resolve() requires specific code examples. Promise is a mechanism in JavaScript for handling asynchronous operations. In actual development, it is often necessary to handle some asynchronous tasks that need to be executed in sequence, and the Promise.resolve() method is used to return a Promise object that has been fulfilled. Promise.resolve() is a static method of the Promise class, which accepts a
Starting from Scratch: Detailed Installation and Setup of VNC on Ubuntu
Dec 29, 2023 pm 04:27 PM
Starting from scratch: Detailed explanation of the installation and settings of VNC on Ubuntu On the Ubuntu operating system, VNC (Virtual Network Computing) is a remote desktop protocol that enables remote access and control of the Ubuntu desktop through a network connection. This article will detail the steps to install and set up VNC on Ubuntu, including specific code examples. Step 1: Install the VNC server. Open the terminal and enter the following command to update the software source and install the VNC server: sud
