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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
Javascript 实用小技巧
Apr 07 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
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 SQL Injection with MySQL
2011/02/27 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python从零开始创建区块链
2018/03/06 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python笔记之代理模式
2019/11/20 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
Overload和Override的区别
2012/09/02 面试题
实习生自荐信范文
2013/11/13 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
五水共治一句话承诺
2014/05/30 职场文书
篮球比赛策划方案
2014/06/05 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis