JS實現(xiàn)網(wǎng)頁搶購功能(觸發(fā),終止腳本)
以下我們是通過chrome瀏覽器的開發(fā)者功能,實現(xiàn)如何用JS代碼完成搶購功能以及如何通過chrome瀏覽器調(diào)試并加載自己寫的JS。
身為一名前端開發(fā)工程師,有時候業(yè)務場景是無法用手速模擬的,老司機也有翻車的時候【你懂得】。因此我特意寫這一篇文章,希望能夠?qū)Υ蠹矣兴鶐椭?/p>
涉及到的內(nèi)容:
1.chrome瀏覽器
2.js代碼
3.函數(shù)節(jié)流
第一步
打開chrome瀏覽器,使用組合鍵Ctrl+shift+i打開開發(fā)者工具,接下來如圖所示。
點擊snippets
第二步
如圖所示
點擊new snippet -->輸入腳本‘名稱'-->Ctrl+s保存。
第三步
如圖所示
選擇新創(chuàng)建的腳本‘名稱',在如圖所示的第二步進行編輯js代碼。最后如第三步所示:run 運行代碼。
js腳本代碼
1.以下是網(wǎng)站上的代碼:
<body> <div class="box"> <img class="img" src="image/pict.png" /> <button class="btn" id='btn'>搶購</button> </div> <script type="text/javascript"> /** * 搶購按鈕 * * */ btn.onclick=function(){ console.log('搶購成功!'); }; </script> </body>
每次點擊搶購 控制臺輸出 搶購成功!
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í)行。
當開發(fā)人員模擬真實環(huán)境的高并發(fā)情況,咱們就可以使用這種腳本的方式模擬測試。通過剛剛的腳本我們發(fā)現(xiàn)我們開發(fā)的頁面中的js是有很多問題的。假設【搶購按鈕】觸發(fā)的是請求數(shù)據(jù)接口。則會出現(xiàn)在一個時間內(nèi)發(fā)出n個請求。處理這個問題可以參考防止重復提交
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>防止ajax重復提交</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> 作者:java-script 鏈接:https://juejin.im/post/59bf6b6ff265da064261ba47 來源:掘金 著作權歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權,非商業(yè)轉(zhuǎn)載請注明出處。
也可以使用函數(shù)節(jié)流方式處理。如下代碼:
//網(wǎng)站上寫的代碼 /** * 搶購按鈕 * * */ btn.onclick=function(){ throttle(function(){ console.log('搶購成功!'); },500); }; /** * 函數(shù)節(jié)流 * @fn {function} 回調(diào)函數(shù) * @time {number} 時間,毫秒 * * */ function throttle(fn,time){ if(throttle.id){ clearTimeout(throttle.id); }; throttle.id=setTimeout(function(){ fn(); },time||200); }
通過以上方式我們可以過濾掉惡意循環(huán)觸發(fā)事件。這種函數(shù)節(jié)流方式也得到大家的一致認可與推廣。
總結(jié)通過上述方式,我們不僅學會了制做簡單的js腳本,也學到一種簡單的阻止js腳本的方法。想要真正的寫一些有用的js腳本還需要你們自己努力哦!想要正在屏蔽掉惡意的js腳本,單純的使用前端技術其實是有很大的難度!特此獻給那些正在努力學習前端并想在前端的道路上越走越遠的童鞋們。祝福你們。
相關文章
微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09Django1.7+JQuery+Ajax驗證用戶注冊集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實現(xiàn)了一個驗證用戶注冊時,用戶名存在不存在的一個小應用。注意,驗證存在不存在使用的是Ajax的方式,不用讓用戶點擊按鈕驗證是否存在,需要的朋友可以參考下2017-04-04關于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題
這篇文章主要介紹了微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-07-07JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼
JS獲取字符串型數(shù)組下標的數(shù)組長度的代碼,需要的朋友可以參考下2013-03-03