近期做了一个需求,功能非常easy,把用户的优惠券数量读取出来,然后显示到“用户中心”上。开发完毕后。别的浏览器正常。可是到IE8上就不行了。并且,按下F12之后,就又能够载入出来了。
首先,找了前端人员,看了看,没有找到原因,她怀疑是脚本冲突,只是忙了半天,还是没有搞定。
其次,换浏览器,来回折腾。
最后,思考了一下,在加这个功能之前,数据也是那样子读取的,用ajax请求后台数据,然后写入到页面的指定标签中,那么为何自己加了一个类似的数据 就不行了呢? 于是,alert了前后的參数。最后发现,在迭代的那一步。alert失效了。可是在console.log()代码之前,是能够的,会不会是这个函数的影响呢?果不其然,去掉console.log()之后。恢复了正常!
代码例如以下:
$(document).ready(function(){ $.ajax({ url: "/ucenter/getAccountByUserId.action", type: "POST", success : function(data) { var json = eval('(' + data + ')'); $.each(json, function (key, value) { if(data != "" && data != null){ $("#em_account").html("¥" + (value.account).toFixed(2)); $("#em_backCount").html("¥" + (value.backCount).toFixed(2)); $("#em_freezeBackCount").html("¥" + (value.freezeBackCount).toFixed(2)); $("#em_freezeAccount").html("¥" + (value.freezeAccount).toFixed(2)); // 设置优惠券数量 var couponStr = ""; // IE8 不支持! console.log("[debug]couponCount : " + value.couponCount); if(value.couponCount > 0){ couponStr = "<a href='/ucenter/queryCoupon.action' style='color:#DD4F11'>"+value.couponCount+"</a>"; }else{ couponStr = value.couponCount; } $("#em_couponCount").html(couponStr); } }); } }); });
感悟:碰到异常,要理清思路之后。再去採取行动。既然曾经的几个数据。都是用相同的方式读取的,那为何自己加了一个就不行了呢?除了加了类似的代码,还加了什么代码呢? 不就是console.log()吗?非常好定位的一个思维方式,却折腾了那么久,太不应该了。
注:IE8/IE9要先按F12开启IE Dev Tools才干存取console物件。
假设使用环境包括IE8/9,请养成良好习惯。用if (window.console) { ... }包住console.log()动作,切忌把IE8/9想成Chrome/Firefox。以为永远有window.console可用。