栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

涉及到的内容:

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

第一步

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

点击snippets

第二步

如图所示

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

第三步

如图所示

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

js脚本代码

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


    
      
      
    
    
  

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

2.脚本代码


btn.click();//触发按钮执行click事件


for(var i=0;i<100;i++){
  btn.click();
}

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

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



  
    
    防止ajax重复提交
  
  
    
    
  


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

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

//网站上写的代码

btn.onclick=function(){
   throttle(function(){
    console.log('抢购成功!');
  },500);
};

function throttle(fn,time){
  if(throttle.id){
    clearTimeout(throttle.id);
  };
  throttle.id=setTimeout(function(){
    fn();
  },time||200);
}

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

总结

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/83707.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号