本文目录一览:
js回调函数如何实现异步,给一个例子
异步处理不用阻塞来等待处理完成,而是允许后续操作,直至其程序将处理完成,并回调通知此函数
那么在js中有如下几种异步方式:
示例1
var async=function(callback){
//read data
setTimeout(function(){
callback('data');
},1000);//1秒后回调
};
//使用
async(function(data){
alert(data);
});
示例2
var async=function(callback){
var xhr=new XMLHttpRequest();
xhr.open('get','.',true);
xhr.onreadystatechange=function(){
callback(xhr.readyStatus);
};
xhr.send();
};
async(function(data){
alert(data);
});
示例3
var async=function(callback){
var img=new Image();
img.onload=img.onerror=function(){
callback(img);
};
img.src='x.jpg';
};
async(function(data){
alert(data);
});
什么是JS回调函数
回调函数就是某个函数执行完毕后执行的函数,没什么的啊。比如:
function(callback){
// 代码
// 以上代码执行完毕后执行回调函数
if(typeof callback === "function"){
callback();
}
}
这是因为js中函数可以当做参数直接传递进去。
Js函数(六) 回调函数和闭包函数 2021-11-21
回调函数概念: 函数的参数callback是另一个参数,这个参数在原始数据中执行
例如:
let arr = [11, 22, 33, 44, 55, 66, 77, 88, 99]
function liFor(arr, callback) {
for (let i = 0; i arr.length; i++) {
if (callback(arr[i])) {
console.log(arr[i]);
}
}
}
console.log('---------遍历数组----------');
liFor(arr, val = true)
console.log('---------输出奇数----------');
liFor(arr, val = val % 2 !== 0)
console.log('---------输出被3整除----------');
liFor(arr, val = val % 3 === 0)
console.log('---------输出被3和6整除----------');
liFor(arr, val = val % 3 === 0 val % 6 === 0)
闭包函数概念:定义一个a方法,在a方法中定义一个b方法,并且b方法里面用到了a方法里面定义的变量,那么此时就形成了闭包函数,由于内部方法里面,用到外部方法里面的变量,外部方法里面的那个变量会一直在内存中存保存着。两个方法嵌套定义,里面的方法,用到了外面方法里面定义的变量,此时这两个方法就形成了闭包。
例如:
function a() {
console.log('a函数被调用了...');
let num1 = 100
let num2 = 200
function b() {
console.log('b函数被调用了...');
console.log(num1 + num2);
}
//返回的返回值也是一个函数,那么a函数就是高阶函数。
return b
}
// 通常情况下,函数执行完成后,函数里面定义的变量,会被销毁。
// a函数,已经调用完毕了,但是a函数里面定义变量,始终在内存中,因为b函数中用到了a函数中定义的变量。
// 那么此时这两个函数,就称之为:闭包函数。
let c = a()
c()
console.log('------------------------------------------');
// 闭包函数的实际案例
function calc(num1, num2, type) {
switch (type) {
case '+':
console.log(`${num1}+${num2}=${num1 + num2}`);
break;
case '-':
console.log(`${num1}-${num2}=${num1 - num2}`);
break;
}
}
// 在实际开发中,我们在做num1和num2的计算之前,可能需要先做其他事情
let num1 = 100
let num2 = 50
// 在做其他事情的过程中,我们的数据很有可能会被篡改。
console.log('查看用户是否登录');
num1 = 555
num2 = 145
console.log('检查用户的权限');
calc(num1, num2, '+') //运行结果不对,因为变量的值被篡改了。
console.log('------------------------------------------');
// 定义一个闭包函数,实现计算器功能
function myCalc(num1, num2, type) {
switch (type) {
case '+':
return function() {
return num1 + num2
}
case '-':
return function() {
return num1 - num2
}
}
}
//先准备好你的数据
let n1 = 100
let n2 = 50
//将你的数据传给计算器方法,由计算器方法,返回一个计算方法。
let js = myCalc(n1, n2, '+')
//在做具体的计算之前,还先做些其他的事情
console.log('查看用户是否登录');
n1 = 555
n2 = 145
console.log('检查用户的权限');
//其他事件准备好了后,执行计算方法
console.log(js());