小編給大家分享一下JS怎么實(shí)現(xiàn)網(wǎng)頁搶購功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、唐縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為唐縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
1、js屬于一種解釋性腳本語言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺(tái)下運(yùn)行,擁有著跨平臺(tái)特性;3、js屬于一種弱類型腳本語言,對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,能夠進(jìn)行類型轉(zhuǎn)換,簡單又容易上手;4、js語言安全性高,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對(duì)象的腳本語言,js不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
涉及到的內(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)擊搶購 控制臺(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í)行。
當(dāng)開發(fā)人員模擬真實(shí)環(huán)境的高并發(fā)情況,咱們就可以使用這種腳本的方式模擬測試。通過剛剛的腳本我們發(fā)現(xiàn)我們開發(fā)的頁面中的js是有很多問題的。假設(shè)【搶購按鈕】觸發(fā)的是請(qǐng)求數(shù)據(jù)接口。則會(huì)出現(xiàn)在一個(gè)時(shí)間內(nèi)發(fā)出n個(gè)請(qǐng)求。處理這個(gè)問題可以參考防止重復(fù)提交
防止ajax重復(fù)提交 作者:java-script 鏈接:https://juejin.im/post/59bf6b6ff265da064261ba47 來源:掘金 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
也可以使用函數(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)可與推廣。
看完了這篇文章,相信你對(duì)“JS怎么實(shí)現(xiàn)網(wǎng)頁搶購功能”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!