JS实现网页抢购功能（触发，终止脚本）
以下我们是通过chrome浏览器的开发者功能，实现如何用JS代码完成抢购功能以及如何通过chrome浏览器调试并加载自己写的JS。
身为一名前端开发工程师，有时候业务场景是无法用手速模拟的，老司机也有翻车的时候【你懂得】。因此我特意写这一篇文章，希望能够对大家有所帮助。
涉及到的内容：
1.chrome浏览器
2.js代码
3.函数节流
第一步
打开chrome浏览器，使用组合键Ctrl+shift+i打开开发者工具，接下来如图所示。
点击snippets
第二步
如图所示
点击new snippet -->输入脚本‘名称'-->Ctrl+s保存。
第三步
如图所示
选择新创建的脚本‘名称'，在如图所示的第二步进行编辑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是有很多问题的。假设【抢购按钮】触发的是请求数据接口。则会出现在一个时间内发出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脚本，单纯的使用前端技术其实是有很大的难度！特此献给那些正在努力学习前端并想在前端的道路上越走越远的童鞋们。祝福你们。
相关推荐
-
JS实现网页抢购功能（触发，终止脚本）
以下我们是通过chrome浏览器的开发者功能,实现如何用JS代码完成抢购功能以及如何通过chrome浏览器调试并加载自己写的JS. 身为一名前端开发工程师,有时候业务场景是无法用手速模拟的,老司机也有翻车的时候[你懂得].因此我特意写这一篇文章,希望能够对大家有所帮助. 涉及到的内容: 1.chrome浏览器 2.js代码 3.函数节流 第一步 打开chrome浏览器,使用组合键Ctrl+shift+i打开开发者工具,接下来如图所示. 点击snippets 第二步 如图所示 点击new snip
-
js实现网页收藏功能
本文实例讲述了js实现动态添加或删除网址功能的方法.分享给大家供大家参考,具体如下: 运行效果图: 具体代码如下 <html> <head> <title>我们</title> <meta charset="utf-8"> <script> function add(){ var name = document.getElementById("name").value; var url = do
-
如何利用 JS 脚本实现网页全自动秒杀抢购功能
倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 GIF 1.制作测试网页 首先我们来做一个简易的抢购页面 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Apple</title> <style type=&q
-
JS利用window.print()实现网页打印功能
目录 前言 一.print()方法 二.打印样式 1.使用打印样式表 2.使用媒介查询 3.内联样式使用media属性 4.在css中使用@import引入打印样式表 三.打印指定区域部分内容 1.方法一 2.方法二 3.方法三 四.强制插入分页 五.设置打印布局(横向.纵向.边距) 六.去除浏览器默认页眉页脚 七.打印方法封装 前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打
-
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
脚本只使用问卷星,多选题目前为选中任意选项数量!!!!!!! 最近看到很多群里都在发问卷连接,各种求帮忙,正好这两天没任务,尝试写了自动填问卷的脚本,类似的脚本网上已经有了,但是后来问卷星加了验证,并且多选题已经不能适用 脚本使用方式(以Firefox为例): 一:鼠标移动到浏览器地址栏下空白处,右键,新建书签 二:填写名称(任意),代码复制到地址栏中 三:打开问卷星连接,然后点击刚刚添加的书签,即可. 代码: javascript: void ( (function () { var hash
-
JS实现基本的网页计算器功能示例
本文实例讲述了JS实现基本的网页计算器功能.分享给大家供大家参考,具体如下: <html> <head> <title>网页计算机</title> <meta charset="UTF-8"/> <style type="text/css"> #jsjdiv{ border: solid 1px black; border-radius: 5px; width: 200px; /*height:
-
js实现网页同时进行多个倒计时功能
本文实例为大家分享了js实现网页同时进行多个倒计时的具体代码,供大家参考,具体内容如下 创建一个时间类Timer. 每个商品的倒计时生成一个实例:var time = new Timer(); /** *startime 应该是毫秒数 */ var Alarm = function (startime, endtime, countFunc, endFunc) { this.time = Math.floor((endtime - startime) / 1000); //时间 this.cou
-
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document
-
vue.js前端网页弹框异步行为示例分析
目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情
-
利用Node.JS实现邮件发送功能
第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使用方法很简单的.首先是要创建一个用于发送邮件的实例 var transporter = nodemailer.createTransport(transport[, defaults]) transport参数属性 属性太多了就只写一些关键的属性 port:连接的端口号,一般就是465 host:你