解决回调地狱的方法:
1.保持代码的简洁性
2.模块化
综合上述,可使用六大原则之一单一职责原则
例:
//延迟函数 六大原则 // var df = $.Deferred(); // 有三种状态: done 成功 fail 失败 progress 正在进行 // 分别返回三个值:resolve reject notify var df = $.Deferred(); // 注册成功的回调函数 df.done(function () { console.log('yes'); }) // 注册失败的回调函数 df.fail(function () { console.log('no'); }) //注册正在进行的回调函数 df.progress(function () { console.log('waiting'); }) // 异步 function createScore() { setInterval(function () { var time = Math.random() * 100; //如果大于60,返回成功 if (time > 60) { df.resolve(); } else if (time < 50) { df.reject(); //返回失败 } else { df.notify(); //正在进行 } }, 1500) } createScore();
运行:返回随机数
怎么用它呢? 用法如下
// 异步 function createScore() { var df = $.Deferred(); //在里面调用它,最后返回一个值 setInterval(function () { var time = Math.random() * 100; if (time > 60) { df.resolve(); } else if (time < 50) { df.reject(); } else { df.notify(); } }, 1500) //返回成功后的值(需要在外面注册) ps:在这个函数里面,有可能会返回失败,因为是随机数 return df.promise(); } // 调用返回成功后的值 var df = createScore(); // 注册成功的回调函数 df.done(function () { console.log('yes'); }) // 注册失败的回调函数 df.fail(function () { console.log('no'); }) //注册正在进行的回调函数 df.progress(function () { console.log('waiting'); })
运行结果
返回的三个值可以传传参,传多少个都可以 例:
// 异步 function createScore() { var df = $.Deferred(); //在里面调用它,最后返回一个值 setInterval(function () { var time = Math.random() * 100; if (time > 60) { df.resolve('成功'); } else if (time < 50) { df.reject('失败'); } else { df.notify('等待'); } }, 1500) //返回成功后的值(需要在外面注册) ps:在这个函数里面,有可能会返回失败,因为是随机数 return df.promise(); } // 调用返回成功后的值 var df = createScore(); // 注册成功的回调函数 df.done(function (ms) { console.log('yes' + ' ' + ms); }) // 注册失败的回调函数 df.fail(function (ms) { console.log('no' + ' ' + ms); }) //注册正在进行的回调函数 df.progress(function (ms) { console.log('waiting' + ' ' + ms); })