js回调函数callback_js 封装callback-优快云博客

本文链接：https://blog.youkuaiyun.com/lifangfang0607/article/details/110237307

本文探讨了在JavaScript中如何封装回调函数来处理异步操作，并指出回调函数的特点，即异步操作完成后调用，参数可以传递给外部。同时提到了Promise作为解决回调地狱的一种方式，通过示例说明其用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中会遇到一些场景，需要自己去封装含有回调函数的方法。

封装callback函数

function fn(callback){
 setTimeout(function(){
   alert("执行成功")
   let res = "校验结果"
   if (!callback) return
   return callback(res)
 },2000)
}

let save = {id: 1,use:'hah'}
function use (data,save) {
  console.log('1',data)
  console.log('2',save)
}

// 调用
fn((res)=>{
  use(res,save)
})

个人理解：(理解有偏差的地方，愿指正)
fn中的异步方操作执行完后，回头再调用callback,callback是外部函数。可解决异步问题
需要注意的是，如果callback(res)有参数，则res相当于实参传递给外面的函数使用，与正常的函数正好相反。如上fn调用中的箭头函数即为callback(res)

promise可解决回调函数的问题：

function usePromise(){
  return new Promise((reslove,reject)=>{
    setTimeout(()=>{
      let number = Math.random() * 2
      if(number > 1){
        alert('校验成功')
        reslove(number)
      }else{
        reject('校验失败')
      }
    },2000)
  })
}
 // 调用
usePromise().then(res => {
  alert(res)
}).catch(err =>{
  alert(err)
})

另外一个例子

var num=0;
function add(n){
  console.log(n)
}

function timer (time,callback){
  setTimeout(function(){
    num=100
    return callback(num)
  },time)
}

// 调用
timer(2000,add)
console.log(num)