JS實現(xiàn)網(wǎng)頁搶購功能（觸發(fā)，終止腳本）

更新時間：2017年11月27日 14:25:54 投稿：laozhang

小編通過一個網(wǎng)頁式的搶購功能的實現(xiàn)給大家講解一下JS如何觸發(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腳本，單純的使用前端技術其實是有很大的難度！特此獻給那些正在努力學習前端并想在前端的道路上越走越遠的童鞋們。祝福你們。

您可能感興趣的文章: