JavaScript中的回调函数（callback）实战技巧

前言

callback，大家都知道是回调函数的意思。如果让你举些callback的例子，我相信你可以举出一堆。但callback的概念你知道吗？你自己在实际应用中能不能合理利用回调实现功能？ 我们在平时的学习中容易犯不去深究的病，功能实现了也就不再去追其原由，对一些概念模模糊糊。 这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

说明

你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件。

案例一

方法

doSomething(msg, callback){
   alert(msg);
   if(typeof callback == "function") 
   callback();
}

调用

this.doSomething("回调函数", ()=>{
   alert("匿名函数实现回调!");
})

解释

执行函数，先执行第一个函数，然后在判断，callback是不是方法，如果是方法，则进行回调函数

案例二

方法

 goTime(val='默认值1',callback='默认值2') {    // 设置方法参数默认的2个值
    console.log('查看val',val);
    console.log('查看callback',callback);
    if(val === 10 && typeof callback == 'function') {
      callback();   //有回调就执行，没有回调就不执行
    }
},
 actEnd(){
   console.log('回调执行成功'); 
},

调用

/*调用方法*/
this.goTime();  //如果不传方法，则代表不需要执行回调
// 返回执行方法
this.goTime(10,this.actEnd);   //test是个方法，此处可以打印出test的值

解释

执行函数this.goTime(),则获取默认值，如果值不等则不执行回调；

执行函数this.goTime(10,this.actEnd)，覆盖默认值，判断语句结果为真，则执行回调函数。