首页  >  文章  >  web前端  >  如何用JS代码实现网页抢购功能

如何用JS代码实现网页抢购功能

小云云
小云云原创
2017-11-29 10:11:248932浏览

作为一名程序员,我们会遇到和很多的开发问题,本章内容小编就为大家分享一篇如何用JS实现网页抢购功能,以下我们是通过chrome浏览器的开发者功能,实现如何用JS代码完成抢购功能以及如何通过chrome浏览器调试并加载自己写的JS。

涉及到的内容:

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

第一步

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

1_副本.png

点击snippets

第二步

如图所示

2_副本.png


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

第三步

如图所示

3_副本.png


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

js脚本代码

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

<body>
    <p class="box">
      <img class="img" src="image/pict.png" />
      <button class="btn" id=&#39;btn&#39;>抢购</button>
    </p>
    <script type="text/javascript">
      /**
       * 抢购按钮
       * 
       * */
      btn.onclick=function(){
        console.log(&#39;抢购成功!&#39;);
      };
    </script>
  </body>

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

2.脚本代码

/**
* 最简单的脚本代码
* 版本1.0.1
*/
btn.click();//触发按钮执行click事件
/**
 * 使用for循环执行抢购的脚本代码
 * 版本1.0.2
 * */
for(var i=0;i<100;i++){
  btn.click();
}

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

4_副本.png


当开发人员模拟真实环境的高并发情况,咱们就可以使用这种脚本的方式模拟测试。通过刚刚的脚本我们发现我们开发的页面中的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:&#39;提交成功!&#39;};
          fn(data);
        },2000);
      }
      /**
       * btn click 提交事件
       * 
       * */
      btn.onclick=function(){
        //检查 按钮是否被锁住,锁住直接rerun
        if(btn.getAttribute(&#39;lock&#39;)){
          return;
        }
        //上锁
        btn.setAttribute(&#39;lock&#39;,1);
        //更改状态
        btn.innerText=&#39;提交中...&#39;;
        //模拟ajax提交
        Ajax(function(data){
          //请求成功
          if(data.result){
            console.log(&#39;请求成功&#39;);
            //请求成功解锁
            btn.setAttribute(&#39;lock&#39;,"");
            //还原状态
            btn.innerText=&#39;提交&#39;;
          }else{
            console.log(&#39;请求失败&#39;);
            //请求失败解锁
            btn.setAttribute(&#39;lock&#39;,"");
            //还原状态
            btn.innerText=&#39;提交&#39;;
          }
        });
      }
    </script>
  </body>
</html>

 

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

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

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

以上内容是JavaScript实现网页抢购功能的教程,不仅如此,我们还学会了制做简单的js脚本,也学到一种简单的阻止js脚本的方,大家赶紧动手操作一下吧。

相关推荐:

解析秒杀抢购思路以及高并发下数据安全

php结合redis实现高并发下的抢购、秒杀功能的实例

js 模仿网上的限时抢购效果_时间日期

以上是如何用JS代码实现网页抢购功能的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn