產(chǎn)品要寫(xiě)一個(gè)類似檢測(cè)的東西
有四塊內(nèi)容檢測(cè)，要發(fā)四個(gè)AJAX。
我想到的$,when
但是用這個(gè)的話，后面三個(gè)done時(shí)間是立馬執(zhí)行的。
我就寫(xiě)了一個(gè)settimeout
但是里面有一個(gè)依次打?qū)μ?hào)的我就寫(xiě)了一個(gè)setInterval
但是這個(gè)時(shí)間老是對(duì)不上。
發(fā)現(xiàn)寫(xiě)法很有問(wèn)題 有沒(méi)有什么好點(diǎn)的寫(xiě)法 或者指出我的錯(cuò)誤。
$('.txturl button').click(function() {
var count = 0
$.when($.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/CheckContent",
async: true,
success: function(data) {
var pardata = JSON.parse(data)
$('.gdt').addClass('layui-anim layui-anim-rotate layui-anim-loop');
$('.coun-jc').hide();
$('.txt-bet li').removeClass('active')
$('.txtnum section span.load-jc').css('display', 'table-cell');
if(pardata.title) {
$('.cont2 i').html('ဆ')
$('.cont2 i').css('color', 'red')
for(j in pardata.title) {
$('.contentul ul').eq(0).append(
"<li>" + j + ":" + pardata.title[j] + "</li>"
)
}
};
for(k in pardata.keywords) {
$('.contentul ul').eq(1).append(
"<li>" + k + ":" + pardata.keywords[k] + "</li>"
)
}
if(!pardata.original) {
$('.cont1 i').html('ဆ');
$('.cont1 i').css('color', 'red')
}
var i = 0;
setInterval(function() {
if(i <= $('.basetxt table i').size() - 1 ) {
$('.basetxt table i').eq(i).show()
i++
} else {
$('.txt-bet li').eq(0).addClass('active')
return false
}
}, 500)
},
error: function() {
layer.msg('檢測(cè)失敗1')
}
})).done(function() {
setTimeout(function () {
$.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/checkSearch",
async: true,
success: function(data) {
var pardata = JSON.parse(data)
if (pardata.google) {
$('.cont3 i').html('ဆ')
$('.cont3 i').css('color', 'red')
}
if (pardata.bing) {
$('.cont4 i').html('ဆ')
$('.cont4 i').css('color', 'red')
}
if (pardata.yahoo) {
$('.cont5 i').html('ဆ')
$('.cont5 i').css('color', 'red')
}
if (pardata.title_top1) {
$('.cont6 i').html('ဆ')
$('.cont7 i').css('color', 'red')
}
var a = 0;
setInterval(function() {
if(a <= $('.seartxt table i').length - 1) {
$('.seartxt table i').eq(a).show()
a++
} else {
$('.txt-bet li').eq(1).addClass('active')
return false
}
}, 500)
},
error: function() {
layer.msg('檢測(cè)失敗2')
}
})
})
}).done(function() {
setTimeout(function () {
$.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/CheckSearch",
async: true,
success: function(data) {
var pardata = JSON.parse(data)
var i = 0;
setInterval(function() {
if(i <= $('.seotxt table i').length - 1) {
$('.seotxt table i').eq(i).show()
i++
} else {
$('.txt-bet li').eq(2).addClass('active')
return false
}
}, 500)
},
error: function() {
layer.msg('檢測(cè)失敗3')
}
})
},500 * ($('.seartxt table i').length) )
}).done(function() {
setTimeout(function () {
$.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/CheckContent",
async: true,
success: function(data) {
var pardata = JSON.parse(data)
var i = 0;
setInterval(function() {
if(i <= $('.basetxt table i').length - 1) {
$('.opttxt table i').eq(i).show()
i++
} else {
$('.txt-bet li').eq(3).addClass('active')
$('.gdt').removeClass('layui-anim layui-anim-rotate layui-anim-loop');
$('.coun-jc').show()
$('.coun-jc').text('88')
$('.txtnum section span.load-jc').css('display', 'none');
return false
}
}, 500)
},
error: function() {
layer.msg('檢測(cè)失敗4')
}
})
},500 * ($('.seotxt table i').length) + 500 * ($('.seartxt table i').length) )
})
})
// 事件流
let eventBus = $('<i></i>')
eventBus.on('event1Done', doEvent2)
eventBus.on('event2Done', doEvent3)
function doEvent1() {
$.ajax({
url: 'http://www.baidu.com',
error: function () {
eventBus.trigger('event1Done', {msg: 'event1 done'})
// trigger觸發(fā)下個(gè)事件并傳遞參數(shù)
}
})
}
function doEvent2 (event, data) {
// data接收上個(gè)事件的參數(shù)
// 同1
}
function doEvent3 (event, data) {
// 同2
}
doEvent1()
你可以利用Promise機(jī)制，把四個(gè)請(qǐng)求寫(xiě)成四部分，然后按照順序執(zhí)行，比如A() B() C() D()四個(gè)函數(shù)，可以寫(xiě)成：
.`
A() //A的ajax成功后，利用resove跳出，進(jìn)入B中進(jìn)行下一個(gè)ajax，以此列推
.then(function() {
B()
})
.then(function() {
C()
})
.then(function() {
D()
}) `
可以了解一下ES6的generator方法
最簡(jiǎn)單的你就在每個(gè)ajax請(qǐng)求的complete函數(shù)里去執(zhí)行下一個(gè)ajax請(qǐng)求咯
最簡(jiǎn)單的方法當(dāng)然是用 ES6 Promise 的 then 來(lái)執(zhí)行了，當(dāng)然如果用 ES2017 的 async/await 語(yǔ)法更帥。假設(shè)每個(gè) ajax 調(diào)用都被封裝成一個(gè)函數(shù)，ajax1(), ajax2() ... 這樣
比如 ajax1 可以封裝成
function ajax1() {
const deffered = $.Deffered();
$.ajax(....)
.done(data => {
dealWith(data);
deferred.resolve(data)
})
.fail(() => deferred.reject());
return deffered.promise();
}jQuery 的 Ajax 或 Deferred/Promise 本來(lái)就是一個(gè) thenable，所以可以
ajax1()
.then(ajax2)
.then(ajax3)
.then(ajax4);
用 async/await 語(yǔ)法可以這樣寫(xiě)
async function doIt() {
await ajax1();
await ajax2();
await ajax3();
await ajax4();
}
最簡(jiǎn)單的方法是修改ajax的屬性，把默認(rèn)的異步改成同步
$('.txturl button').click(function () {
var count = 0
$.when($.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/CheckContent",
async: true,
success: function (data) {
var pardata = JSON.parse(data)
$('.gdt').addClass('layui-anim layui-anim-rotate layui-anim-loop');
$('.coun-jc').hide();
$('.txt-bet li').removeClass('active')
$('.txtnum section span.load-jc').css('display', 'table-cell');
if (pardata.title) {
$('.cont2 i').html('ဆ')
$('.cont2 i').css('color', 'red')
for (j in pardata.title) {
$('.contentul ul').eq(0).append(
"<li>" + j + ":" + pardata.title[j] + "</li>"
)
}
};
for (k in pardata.keywords) {
$('.contentul ul').eq(1).append(
"<li>" + k + ":" + pardata.keywords[k] + "</li>"
)
}
if (!pardata.original) {
$('.cont1 i').html('ဆ');
$('.cont1 i').css('color', 'red')
}
var i = 0;
setInterval(function () {
if (i <= $('.basetxt table i').size() - 1) {
$('.basetxt table i').eq(i).show()
i++
} else {
$('.txt-bet li').eq(0).addClass('active')
return false
}
}, 500)
},
error: function () {
layer.msg('檢測(cè)失敗1')
}
})).done(function () {
return $.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/checkSearch",
async: true,
success: function (data) {
var pardata = JSON.parse(data)
if (pardata.google) {
$('.cont3 i').html('ဆ')
$('.cont3 i').css('color', 'red')
}
if (pardata.bing) {
$('.cont4 i').html('ဆ')
$('.cont4 i').css('color', 'red')
}
if (pardata.yahoo) {
$('.cont5 i').html('ဆ')
$('.cont5 i').css('color', 'red')
}
if (pardata.title_top1) {
$('.cont6 i').html('ဆ')
$('.cont7 i').css('color', 'red')
}
var a = 0;
setInterval(function () {
if (a <= $('.seartxt table i').length - 1) {
$('.seartxt table i').eq(a).show()
a++
} else {
$('.txt-bet li').eq(1).addClass('active')
return false
}
}, 500)
},
error: function () {
layer.msg('檢測(cè)失敗2')
}
})
}).done(function () {
return $.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/CheckSearch",
async: true,
success: function (data) {
var pardata = JSON.parse(data)
var i = 0;
setInterval(function () {
if (i <= $('.seotxt table i').length - 1) {
$('.seotxt table i').eq(i).show()
i++
} else {
$('.txt-bet li').eq(2).addClass('active')
return false
}
}, 500)
},
error: function () {
layer.msg('檢測(cè)失敗3')
}
})
}).done(function () {
return $.ajax({
type: "get",
url: "http://www.webossgoo3.com/google/CheckContent",
async: true,
success: function (data) {
var pardata = JSON.parse(data)
var i = 0;
setInterval(function () {
if (i <= $('.basetxt table i').length - 1) {
$('.opttxt table i').eq(i).show()
i++
} else {
$('.txt-bet li').eq(3).addClass('active')
$('.gdt').removeClass('layui-anim layui-anim-rotate layui-anim-loop');
$('.coun-jc').show()
$('.coun-jc').text('88')
$('.txtnum section span.load-jc').css('display', 'none');
return false
}
}, 500)
},
error: function () {
layer.msg('檢測(cè)失敗4')
}
})
})
})
北大青鳥(niǎo)APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國(guó)IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國(guó)家
北大青鳥(niǎo)中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年，經(jīng)過(guò)二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán)，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國(guó)一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國(guó)成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開(kāi)發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺(tái)面向?qū)ο箝_(kāi)發(fā)經(jīng)驗(yàn)，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫(kù)，具有快速界面開(kāi)發(fā)的能力，對(duì)瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁(yè)制作和網(wǎng)頁(yè)游戲開(kāi)發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國(guó)Software AG 技術(shù)顧問(wèn)，美國(guó)Dachieve 系統(tǒng)架構(gòu)師，美國(guó)AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多