用java进行WEB开发购物网站,如何解决十秒抢购问题?谢谢!@

发布网友发布时间：2022-05-15 14:01

我来回答

共7个回答

懂视网时间：2022-05-15 18:22

作为一名程序员，我们会遇到和很多的开发问题，本章内容小编就为大家分享一篇如何用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='btn'>抢购</button>
 </p>
 <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浏览器内置脚本，并控制执行。

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:'提交成功！'};
  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>

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

//网站上写的代码
/**
 * 抢购按钮
 * 
 * */
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);
}

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

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

热心网友时间：2022-05-15 15:30

抢购机制可以这样：首先在页面中用，在页面中用js写settime来显示倒数十秒，然后当用户输入抢购价格后点击抢购，就给这个用户保存数据库数据中的一个临时视图的竞标价格的字段中，在这十秒内这个字段可以更新的，如果这样访问数据库很大的话，就先把出价保存在页面，然后十秒结束后按你最后输入的最高价为标准，存进数据库。最后通过便利此视图取出最高价，然后提示出价用户抢购成功。

热心网友时间：2022-05-15 16:48

步骤如下：

首先在页面中用，在页面中用js写settime来显示倒数十秒

然后当用户输入抢购价格后点击抢购，就给这个用户保存数据库数据中的一个临时视图的竞标价格的字段中，在这十秒内这个字段可以更新的。

如果这样访问数据库很大的话，就先把出价保存在页面，然后十秒结束后按你最后输入的最高价为标准，存进数据库。

最后通过便利此视图取出最高价，然后提示出价用户抢购成功。

热心网友时间：2022-05-15 18:23

参考在线IM的做法，用长连接comet推送，大家都保持着和服务端的长连接，当有一个人出价时，给所有连接用户返回新价格并JS重置倒计时

热心网友时间：2022-05-15 20:14

个人想法 1.添加事物机制 2.将用户绑定到Session中追问能详细点么！@ 我还没有什么编程经验！@ 谢谢~！

追答事物机制是为了是让数据库的数据不会反生冲突，相当于线程上的对于资源的封闭.而Session是以一种技术将服务器端和游览器端发送Cookies实现。这个你需要了解基本原理才可以建议你去了解下

热心网友时间：2022-05-15 22:22

什么问题呢？

热心网友时间：2022-05-16 00:47

这哥