JS實(shí)現(xiàn)網(wǎng)頁(yè)搶購(gòu)功能(觸發(fā),終止腳本)
以下我們是通過(guò)chrome瀏覽器的開發(fā)者功能,實(shí)現(xiàn)如何用JS代碼完成搶購(gòu)功能以及如何通過(guò)chrome瀏覽器調(diào)試并加載自己寫的JS。
身為一名前端開發(fā)工程師,有時(shí)候業(yè)務(wù)場(chǎng)景是無(wú)法用手速模擬的,老司機(jī)也有翻車的時(shí)候【你懂得】。因此我特意寫這一篇文章,希望能夠?qū)Υ蠹矣兴鶐椭?/p>
涉及到的內(nèi)容:
1.chrome瀏覽器
2.js代碼
3.函數(shù)節(jié)流
第一步
打開chrome瀏覽器,使用組合鍵Ctrl+shift+i打開開發(fā)者工具,接下來(lái)如圖所示。
點(diǎn)擊snippets
第二步
如圖所示
點(diǎn)擊new snippet -->輸入腳本‘名稱'-->Ctrl+s保存。
第三步
如圖所示
選擇新創(chuàng)建的腳本‘名稱',在如圖所示的第二步進(jìn)行編輯js代碼。最后如第三步所示:run 運(yùn)行代碼。
js腳本代碼
1.以下是網(wǎng)站上的代碼:
<body> <div class="box"> <img class="img" src="image/pict.png" /> <button class="btn" id='btn'>搶購(gòu)</button> </div> <script type="text/javascript"> /** * 搶購(gòu)按鈕 * * */ btn.onclick=function(){ console.log('搶購(gòu)成功!'); }; </script> </body>
每次點(diǎn)擊搶購(gòu) 控制臺(tái)輸出 搶購(gòu)成功!
2.腳本代碼
/** * 最簡(jiǎn)單的腳本代碼 * 版本1.0.1 */ btn.click();//觸發(fā)按鈕執(zhí)行click事件 /** * 使用for循環(huán)執(zhí)行搶購(gòu)的腳本代碼 * 版本1.0.2 * */ for(var i=0;i<100;i++){ btn.click(); }
通過(guò)上邊的腳本js代碼可以知道,我們可以在chrome瀏覽器內(nèi)置腳本,并控制執(zhí)行。
當(dāng)開發(fā)人員模擬真實(shí)環(huán)境的高并發(fā)情況,咱們就可以使用這種腳本的方式模擬測(cè)試。通過(guò)剛剛的腳本我們發(fā)現(xiàn)我們開發(fā)的頁(yè)面中的js是有很多問(wèn)題的。假設(shè)【搶購(gòu)按鈕】觸發(fā)的是請(qǐng)求數(shù)據(jù)接口。則會(huì)出現(xiàn)在一個(gè)時(shí)間內(nèi)發(fā)出n個(gè)請(qǐng)求。處理這個(gè)問(wèn)題可以參考防止重復(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){ //請(qǐng)求成功 if(data.result){ console.log('請(qǐng)求成功'); //請(qǐng)求成功解鎖 btn.setAttribute('lock',""); //還原狀態(tài) btn.innerText='提交'; }else{ console.log('請(qǐng)求失敗'); //請(qǐng)求失敗解鎖 btn.setAttribute('lock',""); //還原狀態(tài) btn.innerText='提交'; } }); } </script> </body> </html> 作者:java-script 鏈接:https://juejin.im/post/59bf6b6ff265da064261ba47 來(lái)源:掘金 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
也可以使用函數(shù)節(jié)流方式處理。如下代碼:
//網(wǎng)站上寫的代碼 /** * 搶購(gòu)按鈕 * * */ btn.onclick=function(){ throttle(function(){ console.log('搶購(gòu)成功!'); },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); }
通過(guò)以上方式我們可以過(guò)濾掉惡意循環(huán)觸發(fā)事件。這種函數(shù)節(jié)流方式也得到大家的一致認(rèn)可與推廣。
總結(jié)通過(guò)上述方式,我們不僅學(xué)會(huì)了制做簡(jiǎn)單的js腳本,也學(xué)到一種簡(jiǎn)單的阻止js腳本的方法。想要真正的寫一些有用的js腳本還需要你們自己努力哦!想要正在屏蔽掉惡意的js腳本,單純的使用前端技術(shù)其實(shí)是有很大的難度!特此獻(xiàn)給那些正在努力學(xué)習(xí)前端并想在前端的道路上越走越遠(yuǎn)的童鞋們。祝福你們。
- JS腳本實(shí)現(xiàn)網(wǎng)頁(yè)自動(dòng)秒殺點(diǎn)擊
- Docker + Nodejs + Kafka + Redis + MySQL搭建簡(jiǎn)單秒殺環(huán)境
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
- js倒計(jì)時(shí)搶購(gòu)實(shí)例
- 紅米手機(jī)搶購(gòu)的js代碼
- 團(tuán)購(gòu)、定時(shí)搶購(gòu)倒計(jì)時(shí)js版
- 如何利用 JS 腳本實(shí)現(xiàn)網(wǎng)頁(yè)全自動(dòng)秒殺搶購(gòu)功能
相關(guān)文章
微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Django1.7+JQuery+Ajax驗(yàn)證用戶注冊(cè)集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來(lái)模擬實(shí)現(xiàn)了一個(gè)驗(yàn)證用戶注冊(cè)時(shí),用戶名存在不存在的一個(gè)小應(yīng)用。注意,驗(yàn)證存在不存在使用的是Ajax的方式,不用讓用戶點(diǎn)擊按鈕驗(yàn)證是否存在,需要的朋友可以參考下2017-04-04JS實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕后修改顏色,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12關(guān)于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題
這篇文章主要介紹了微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07javascript獲取select標(biāo)簽選中的值
這篇文章主要介紹javascript獲取select標(biāo)簽選中的值方法,比較實(shí)用,需要的朋友可以參考下。2016-06-06原生js驗(yàn)證簡(jiǎn)潔注冊(cè)登錄頁(yè)面
這篇文章主要為大家詳細(xì)介紹了原生js驗(yàn)證簡(jiǎn)潔美觀注冊(cè)登錄頁(yè)面的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JS獲取字符串型數(shù)組下標(biāo)的數(shù)組長(zhǎng)度的代碼
JS獲取字符串型數(shù)組下標(biāo)的數(shù)組長(zhǎng)度的代碼,需要的朋友可以參考下2013-03-03