当前位置：Gxlcms > JavaScript > JS实现网页抢购功能（触发，终止脚本）

JS实现网页抢购功能（触发，终止脚本）

时间：2021-07-01 10:21:17 帮助过：186人阅读

以下我们是通过chrome浏览器的开发者功能，实现如何用JS代码完成抢购功能以及如何通过chrome浏览器调试并加载自己写的JS。

身为一名前端开发工程师，有时候业务场景是无法用手速模拟的，老司机也有翻车的时候【你懂得】。因此我特意写这一篇文章，希望能够对大家有所帮助。

涉及到的内容：

1.chrome浏览器
2.js代码
3.函数节流

第一步

打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。

点击snippets

第二步

如图所示

点击new snippet -->输入脚本‘名称'-->Ctrl+s保存。

第三步

如图所示

选择新创建的脚本‘名称'，在如图所示的第二步进行编辑js代码。最后如第三步所示：run 运行代码。

js脚本代码

1.以下是网站上的代码：

  1. <body>
  2.     <div class="box">
  3.       <img class="img" src="image/pict.png" />
  4.       <button class="btn" id='btn'>抢购</button>
  5.     </div>
  6.     <script type="text/javascript">
  7.       /**
  8.        * 抢购按钮
  9.        * 
  10.        * */
  11.       btn.onclick=function(){
  12.         console.log('抢购成功！');
  13.       };
  14.     </script>
  15.   </body>

每次点击抢购 控制台输出 抢购成功！

2.脚本代码

  1. /**
  2. * 最简单的脚本代码
  3. * 版本1.0.1
  4. */
  5. btn.click();//触发按钮执行click事件
  6. /**
  7.  * 使用for循环执行抢购的脚本代码
  8.  * 版本1.0.2
  9.  * */
  10. for(var i=0;i<100;i++){
  11.   btn.click();
  12. }

通过上边的脚本js代码可以知道，我们可以在chrome浏览器内置脚本，并控制执行。

当开发人员模拟真实环境的高并发情况，咱们就可以使用这种脚本的方式模拟测试。通过刚刚的脚本我们发现我们开发的页面中的js是有很多问题的。假设【抢购按钮】触发的是请求数据接口。则会出现在一个时间内发出n个请求。处理这个问题可以参考防止重复提交

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>防止ajax重复提交</title>
  6.   </head>
  7.   <body>
  8.     <button id="btn">提交</button>
  9.     <script>
  10.       /**
  11.        * 模拟ajax提交
  12.        * @fn 回调函数
  13.        * */
  14.       function Ajax(fn){
  15.         setTimeout(function(){
  16.           var data= {result:true,msg:'提交成功！'};
  17.           fn(data);
  18.         },2000);
  19.       }
  20.       /**
  21.        * btn click 提交事件
  22.        * 
  23.        * */
  24.       btn.onclick=function(){
  25.         //检查 按钮是否被锁住，锁住直接rerun
  26.         if(btn.getAttribute('lock')){
  27.           return;
  28.         }
  29.         //上锁
  30.         btn.setAttribute('lock',1);
  31.         //更改状态
  32.         btn.innerText='提交中...';
  33.         //模拟ajax提交
  34.         Ajax(function(data){
  35.           //请求成功
  36.           if(data.result){
  37.             console.log('请求成功');
  38.             //请求成功解锁
  39.             btn.setAttribute('lock',"");
  40.             //还原状态
  41.             btn.innerText='提交';
  42.           }else{
  43.             console.log('请求失败');
  44.             //请求失败解锁
  45.             btn.setAttribute('lock',"");
  46.             //还原状态
  47.             btn.innerText='提交';
  48.           }
  49.         });
  50.       }
  51.     </script>
  52.   </body>
  53. </html>
  54. 作者：java-script
  55. 链接：https://juejin.im/post/59bf6b6ff265da064261ba47
  56. 来源：掘金
  57. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

也可以使用函数节流方式处理。如下代码：

  1. //网站上写的代码
  2. /**
  3.  * 抢购按钮
  4.  * 
  5.  * */
  6. btn.onclick=function(){
  7.    throttle(function(){
  8.     console.log('抢购成功！');
  9.   },500);
  10. };
  11. /**
  12.  * 函数节流
  13.  * @fn {function} 回调函数
  14.  * @time {number} 时间，毫秒
  15.  * 
  16.  * */
  17. function throttle(fn,time){
  18.   if(throttle.id){
  19.     clearTimeout(throttle.id);
  20.   };
  21.   throttle.id=setTimeout(function(){
  22.     fn();
  23.   },time||200);
  24. }

通过以上方式我们可以过滤掉恶意循环触发事件。这种函数节流方式也得到大家的一致认可与推广。

总结

通过上述方式，我们不仅学会了制做简单的js脚本，也学到一种简单的阻止js脚本的方法。想要真正的写一些有用的js脚本还需要你们自己努力哦！想要正在屏蔽掉恶意的js脚本，单纯的使用前端技术其实是有很大的难度！特此献给那些正在努力学习前端并想在前端的道路上越走越远的童鞋们。祝福你们。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！