javascript中callback的使用

javascript中callback的使用

callback 是一种特殊的函数，这个函数被作为参数传给另一个函数去调用，这样的函数就是回调函数。回调，顾名思义，回头再调。回调与同步、异步并没有直接的联系，回调只是一种实现方式，既可以有同步回调，也可以有异步回调，还可以有事件处理回调和延迟函数回调。

一、最简单的例子

// 判断奇数
function isOdd(num){ return num % 2 }
const arr = [2,3,4,5,7,8]
console.log( arr.filter(isOdd) )

这里是把isOdd函数当成参数进行传递执行

二、同步任务

const url = "https://www.baidu.com/pic/1.png"

function download(url){
	console.log("正在下载图片:",url)
}

function process(url){
	console.log("正在处理图片:",url)
}

// 这里如果要先下载完,才能处理
download(url)
process(url)

如果下载的时候过长,发生异步,如何控制顺序?

三、异步回调(顺序执行)

const url = "https://www.baidu.com/pic/1.png"

function download(url ,callback){
	setTimeout(()=>{
			console.log("正在下载图片:",url)
			callback(url)
	}	,2000)
}

function process(url){
	console.log("正在处理图片:",url)
}

// 这样就可以控制顺序了
download( url,process )

四、系统应用

// 消息确定和取消的弹窗
Vue.prototype.$baseConfirm = (content, title = undefined, callback1 = undefined, callback2 = undefined, confirmButtonText = '确定', cancelButtonText = '取消') => {
 MessageBox.confirm(content, title || '提示', {
   confirmButtonText,
   cancelButtonText,
   closeOnClickModal: false,
   type: 'warning',
   lockScroll: false,
 })
   .then(() => {
     if (callback1) { // 执行确定的回调
       callback1()
     }
   })
   .catch(() => {
     if (callback2) {  // 执行取消的回调
       callback2()
     }
   })
}

总结

callback比适合简单异步的方式,更多地用来简化代码,如果异步任务(超过3个)比较多,则仍然推荐使用promise,async/await等来解决更为高效