PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » 特别推荐:jquery连续点击造成数据显示错误解决方法

特别推荐:jquery连续点击造成数据显示错误解决方法

我在项目中遇到的问题是这样的, 做了一下购物车,在购物车列表中根据"-"、"+"两个按钮来实现的数量改变,同时更新页面的价格和数据。 大家都知道网络存在延迟,就会造成页面中的数据与最终数据不一致的后果!这个错误是非常严重的。 在搜索引擎中查找关键词: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] 还是要多试验才能得出结果!实践啊!

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.