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 相关文章推荐
大家未必知道的Js技巧收藏
Apr 07 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
JavaScript的一些小技巧分享
Jan 06 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结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
js style动态设置table高度
2014/10/21 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
中秋寄语大全
2014/04/11 职场文书
常务副总经理任命书
2014/06/05 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2014年党总支工作总结
2014/12/18 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL