JS实现网页抢购功能(触发,终止脚本)


Posted in Javascript onNovember 27, 2017

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

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

涉及到的内容:

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

第一步

打开chrome浏览器,使用组合键Ctrl+shift+i打开开发者工具,接下来如图所示。JS实现网页抢购功能(触发,终止脚本)

点击snippets

第二步

如图所示

JS实现网页抢购功能(触发,终止脚本)

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

第三步

如图所示

JS实现网页抢购功能(触发,终止脚本)

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

js脚本代码

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

<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();//触发按钮执行click事件

/**
 * 使用for循环执行抢购的脚本代码
 * 版本1.0.2
 * */
for(var i=0;i<100;i++){
  btn.click();
}

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

JS实现网页抢购功能(触发,终止脚本)

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>防止ajax重复提交</title>
  </head>
  <body>
    <button id="btn">提交</button>
    <script>

      /**
       * 模拟ajax提交
       * @fn 回调函数
       * */
      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);
        //更改状态
        btn.innerText='提交中...';
        //模拟ajax提交
        Ajax(function(data){
          //请求成功
          if(data.result){
            console.log('请求成功');
            //请求成功解锁
            btn.setAttribute('lock',"");
            //还原状态
            btn.innerText='提交';
          }else{
            console.log('请求失败');
            //请求失败解锁
            btn.setAttribute('lock',"");
            //还原状态
            btn.innerText='提交';
          }
        });
      }
    </script>
  </body>
</html>

作者:java-script
链接:https://juejin.im/post/59bf6b6ff265da064261ba47
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

//网站上写的代码
/**
 * 抢购按钮
 * 
 * */
btn.onclick=function(){
   throttle(function(){
    console.log('抢购成功!');
  },500);
};
/**
 * 函数节流
 * @fn {function} 回调函数
 * @time {number} 时间,毫秒
 * 
 * */
function throttle(fn,time){
  if(throttle.id){
    clearTimeout(throttle.id);
  };
  throttle.id=setTimeout(function(){
    fn();
  },time||200);
}

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

总结

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

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JS基于贪心算法解决背包问题示例
Nov 27 #Javascript
基于vue.js的分页插件详解
Nov 27 #Javascript
webpack构建换肤功能的思路详解
Nov 27 #Javascript
vue实现商城上货组件简易版
Nov 27 #Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 #Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 #Javascript
vue实现商城购物车功能
Nov 27 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
浅谈php和.net的区别
2014/09/28 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JavaScript运算符小结
2015/06/03 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
numpy下的flatten()函数用法详解
2019/05/27 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
如何运行带参数的python脚本
2019/11/15 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
年终自我鉴定
2013/10/09 职场文书
新闻编辑求职信
2014/04/09 职场文书
新文化运动的口号
2014/06/21 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
Java Spring Lifecycle的使用
2022/05/06 Java/Android