如何用JS代碼實(shí)現(xiàn)網(wǎng)頁搶購功能

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 20:10:53

如何用JS代碼實(shí)現(xiàn)網(wǎng)頁搶購功能

涉及到的內(nèi)容。1.chrome瀏覽器。2.js代碼；3.函數(shù)節(jié)流；第一步；打開chrome瀏覽器，使用組合鍵Ctrl+shift+i打開開發(fā)者工具，接下來如圖所示。點(diǎn)擊snippets。第二步；如圖所示；點(diǎn)擊new snippet -->；輸入腳本‘名稱'；-->；Ctrl+s保存。第三步；如圖所示；選擇新創(chuàng)建的腳本‘名稱'；，在如圖所示的第二步進(jìn)行編輯js代碼。最后如第三步所示：run 運(yùn)行代碼。js腳本代碼；1.以下是網(wǎng)站上的代碼。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀涉及到的內(nèi)容。1.chrome瀏覽器。2.js代碼；3.函數(shù)節(jié)流；第一步；打開chrome瀏覽器，使用組合鍵Ctrl+shift+i打開開發(fā)者工具，接下來如圖所示。點(diǎn)擊snippets。第二步；如圖所示；點(diǎn)擊new snippet -->；輸入腳本‘名稱'；-->；Ctrl+s保存。第三步；如圖所示；選擇新創(chuàng)建的腳本‘名稱'；，在如圖所示的第二步進(jìn)行編輯js代碼。最后如第三步所示：run 運(yùn)行代碼。js腳本代碼；1.以下是網(wǎng)站上的代碼。

作為一名程序員，我們會(huì)遇到和很多的開發(fā)問題，本章內(nèi)容小編就為大家分享一篇如何用JS實(shí)現(xiàn)網(wǎng)頁搶購功能，以下我們是通過chrome瀏覽器的開發(fā)者功能，實(shí)現(xiàn)如何用JS代碼完成搶購功能以及如何通過chrome瀏覽器調(diào)試并加載自己寫的JS。

涉及到的內(nèi)容：

1.chrome瀏覽器
2.js代碼
3.函數(shù)節(jié)流

第一步

打開chrome瀏覽器，使用組合鍵Ctrl+shift+i打開開發(fā)者工具，接下來如圖所示。

1_副本.png

點(diǎn)擊snippets

第二步

如圖所示

2_副本.png

點(diǎn)擊new snippet -->輸入腳本‘名稱'-->Ctrl+s保存。

第三步

如圖所示

3_副本.png

選擇新創(chuàng)建的腳本‘名稱'，在如圖所示的第二步進(jìn)行編輯js代碼。最后如第三步所示：run 運(yùn)行代碼。

js腳本代碼

1.以下是網(wǎng)站上的代碼：

<body>
 <p class="box">
 <img class="img" src="image/pict.png" />
 <button class="btn" id='btn'>搶購</button>
 </p>
 <script type="text/javascript">
 /**
 * 搶購按鈕
 * 
 * */
 btn.onclick=function(){
 console.log('搶購成功！');
 };
 </script>
 </body>

每次點(diǎn)擊搶購控制臺(tái)輸出搶購成功！

2.腳本代碼

/**
* 最簡單的腳本代碼
* 版本1.0.1
*/
btn.click();//觸發(fā)按鈕執(zhí)行click事件
/**
 * 使用for循環(huán)執(zhí)行搶購的腳本代碼
 * 版本1.0.2
 * */
for(var i=0;i<100;i++){
 btn.click();
}

通過上邊的腳本js代碼可以知道，我們可以在chrome瀏覽器內(nèi)置腳本，并控制執(zhí)行。

4_副本.png

當(dāng)開發(fā)人員模擬真實(shí)環(huán)境的高并發(fā)情況，咱們就可以使用這種腳本的方式模擬測試。通過剛剛的腳本我們發(fā)現(xiàn)我們開發(fā)的頁面中的js是有很多問題的。假設(shè)【搶購按鈕】觸發(fā)的是請求數(shù)據(jù)接口。則會(huì)出現(xiàn)在一個(gè)時(shí)間內(nèi)發(fā)出n個(gè)請求。處理這個(gè)問題可以參考防止重復(fù)提交

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>防止ajax重復(fù)提交</title>
 </head>
 <body>
 <button id="btn">提交</button>
 <script>
 
 /**
 * 模擬ajax提交
 * @fn 回調(diào)函數(shù)
 * */
 function Ajax(fn){
 setTimeout(function(){
 var data= {result:true,msg:'提交成功！'};
 fn(data);
 },2000);
 }
 /**
 * btn click 提交事件
 * 
 * */
 btn.onclick=function(){
 //檢查 按鈕是否被鎖住，鎖住直接rerun
 if(btn.getAttribute('lock')){
 return;
 }
 //上鎖
 btn.setAttribute('lock',1);
 //更改狀態(tài)
 btn.innerText='提交中...';
 //模擬ajax提交
 Ajax(function(data){
 //請求成功
 if(data.result){
 console.log('請求成功');
 //請求成功解鎖
 btn.setAttribute('lock',"");
 //還原狀態(tài)
 btn.innerText='提交';
 }else{
 console.log('請求失敗');
 //請求失敗解鎖
 btn.setAttribute('lock',"");
 //還原狀態(tài)
 btn.innerText='提交';
 }
 });
 }
 </script>
 </body>
</html>

也可以使用函數(shù)節(jié)流方式處理。如下代碼：

//網(wǎng)站上寫的代碼
/**
 * 搶購按鈕
 * 
 * */
btn.onclick=function(){
 throttle(function(){
 console.log('搶購成功！');
 },500);
};
/**
 * 函數(shù)節(jié)流
 * @fn {function} 回調(diào)函數(shù)
 * @time {number} 時(shí)間，毫秒
 * 
 * */
function throttle(fn,time){
 if(throttle.id){
 clearTimeout(throttle.id);
 };
 throttle.id=setTimeout(function(){
 fn();
 },time||200);
}

通過以上方式我們可以過濾掉惡意循環(huán)觸發(fā)事件。這種函數(shù)節(jié)流方式也得到大家的一致認(rèn)可與推廣。

以上內(nèi)容是JavaScript實(shí)現(xiàn)網(wǎng)頁搶購功能的教程，不僅如此，我們還學(xué)會(huì)了制做簡單的js腳本，也學(xué)到一種簡單的阻止js腳本的方，大家趕緊動(dòng)手操作一下吧。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何用JS代碼實(shí)現(xiàn)網(wǎng)頁搶購功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：搶購網(wǎng)頁實(shí)現(xiàn)

熱門焦點(diǎn)

如何用JS代碼實(shí)現(xiàn)網(wǎng)頁搶購功能

如何用JS代碼實(shí)現(xiàn)網(wǎng)頁搶購功能

如何用JS代碼實(shí)現(xiàn)網(wǎng)頁搶購功能

最新推薦

猜你喜歡

熱門推薦