我在项目中遇到的问题是这样的,
做了一下购物车,在购物车列表中根据"-"、"+"两个按钮来实现的数量改变,同时更新页面的价格和数据。
大家都知道网络存在延迟,就会造成页面中的数据与最终数据不一致的后果!这个错误是非常严重的。
在搜索引擎中查找关键词:jquery连续点击解决,在CSDN上找到了与之相关的文章:
求助:使用jquery循环动态获取数据,当服务器响应慢时,连续点击某链接后,响应出现重复数据,该如何解决
笨人愚昧,没有看懂,因为问题太常了!只看了回复,从中得到的启发,设置返回数据后才能进入下一次点击。
各位看客请看:
[js]
<script type="text/javascript">
var c = true;
$(function(){
//删除单一商品
$('.del').click(function(){
var id = $(this).attr('id');
$.post('/index.php/Article/delcart', {id: id}, function(data){
if(data.status){
$("#total_integral").html(data.data);
$('#tr_'+id).remove();
updateTable();
}else{
alert('删除失败');
}
}, 'json');
});
//清空购物车
$('#clearAll').click(function(){
$.post('/index.php/Article/clearAll', function(data){
if(data.status){
$("tbody").html('<tr><td align="center" colspan="5">购物车为空!</td></tr>');
$("#total_integral").html('0');
$("#clearAll").attr('disabled', true);
$("#paid").attr('disabled', true);
}else{
alert('操作出错!');
}
}, 'json');
});
//结算
$("#paid").click(function(){
location.href='/index.php/Article/paid.shtml';
});
//减产品数量
$(".cut").click(function(){
var num = parseInt($(this).next().val());
if (num == 1){
alert('不能再减少产品的数量了')
return false;
}
$(this).next().val(num-1);
return false;
});
//增加产品数量
$(".add").click(function(){
if (c == false){
alert('请减缓你的点击速度');
return false;
}
c = false;
var num = parseInt($(this).prev().val());
var trs = $(this).parent().parent().attr('id');
tr = trs.split('_');
var pro_id = tr[1];
if (pro_id.length < 1){
alert('增加产品数量失败');
return false;
}
//查询产品库存
$.get('/index.php/Article/stock', {id: pro_id}, function(data){
if(data.status){
var numbers = data.data;
if (num >= numbers){
$("#"+trs+" input").val(numbers);
alert('库存不足');
return false;
}else{
addcart(pro_id);
$("#"+trs+" input").val(num+1);
update(trs,num+1);
}
}else{
alert(data.info);
return false;
}
c = true;
}, 'json');
return false;
});
});
//更新总积分
function getCart(){
$.get('/index.php/Article/getCart',function(data){
if(data.status){
var inte = data.data.produts_cart_total;
$('#total_integral').html(inte);
}
},'json');
setTimeout('getCart()', 10000);//每隔10秒刷新一次购物车
}
//添加购物车产品,更新积分
function addcart(id){
$.get('/index.php/Article/addcart',{id: id}, function(data){
if (data.status){
getCart();
}else{
alert(data.info);
return false;
}
}, 'json');
}
//更新小计
function update(id,num){
var per = $("#"+id+" .per").html();
var sum = parseInt(per) * num;
$("#"+id+" .sum").html(sum);
}
//删除单行更新表格
function updateTable(){
var tr = $("table > tbody > tr").length;
if (tr == 0){
$("table > tbody").html('<tr align="center"><td colspan="5">购物车暂时还没有商品!</td></tr>');
$("#paid,#clearAll").attr('disabled', true);
}
}
</script>
[/js]
还是要多试验才能得出结果!实践啊!