在写后台代码时,发现的前台bug ---> 点击不同查询按钮之后,会重复的向后台发送请求,给经理说过之后很自然的交给我去处理。没办法公司就一个前端还比较忙,可我js是真的只懂一丢丢 *_*。
硬着头皮上吧:
原本的代码 获取每页数据(dataList)、数据总条数(totalPage)、总页数(page)多会发送Ajax请求,明显是不合理的,况且后台传过来的数据已经够了。修改合并代码还不算困难,不过要注意全局变量的问题。在本方法内调用另一个方法时,想要将获取的数据传过去使用,需要定义全局变量。
第二步,我发现改过之后,还是会有重复请求的问题,现在只是第一次只发送一次,再点击会重复发送(可以看下图,我的按钮分布)。期间一个好的方法时,可以一点点打桩看看效果(alert("看看此时效果"); 也可以用console.log(参数名); 在浏览器 按F12 的sonsole查看),这样就会发现问题的所在,不过在哪里打桩是有技巧的,那里是关键点自己用多了就会找了。最后发现原因出在分页部分 Pagination
第三步,这个地方我耗时最长,用了好几天时间,人都抑郁了。也在网上找了原因,试了各种方法都不太行,起初我最怀疑的是 Pagination分页插件中的属性问题,想着总条数或者那个没有被刷新还是咋的,想去看看官方的Pagination插件手册文档,但是好像找到的说的也不清楚。就只好详细的分析打桩,在浏览器看现象,重复发送请求的就是分页的回调函数那一块。
最后,发现是分页的回调就好办了,此时的现象是:第一次点击正常,在点击其他按钮之后,按页数变换就不正常了,回调里边的函数会执行两次,在点一次按钮之后,就会变成三次,一直往上加。先暂很明朗了,回调里边的函数没有关闭,还处于潜伏状态,一出发分页他就给你来一次,恶心死人。
现在就是解决 在回调函数执行之后给他关掉。 其实在做这个之前我就想过去关掉回调试试,但是一查 网上有的说js人工干预关掉就是不正常的操作,我自己也是了一个关闭的方法也没效果就不再考虑了。我也不是想来个事后诸葛亮或者说 不再相信各位博友,但是也得有分辨和提取优秀的部分,最重要的是找到问题的根本原因。
我已经很清楚的明白我要去关闭回调函数,去搜索博客,幸运的找到了回调现象一直的想法,虽说和我想的解决方式不一,但是问题是一致的 下图:
我有试了关闭回调的方法 $("#pagination").stopPagination({}),成功了。 我爆开心,啊哈哈哈。
代码呈上来:
//分页
$("#pagination").pagination({
currentPage: 1,// 当前页数
totalPage: totalPage ,// 总页数
isShow: true,// 是否显示首尾页
count: 5,// 显示个数
homePageText: "«",// 首页文本
endPageText: "»",// 尾页文本
prevPageText: "‹",// 上一页文本
nextPageText: "›",// 下一页文本
callback: function(current) {
// 回调,current(当前页数)
$("#current1").text(current);
//alert(current);
getSnmp(pageOneAllData); //用于显示数据(里边有判断,若非第一页,则会向后台发送请求)
$("#pagination").stopPagination({}) //回调执行过之后就在进程中关掉,下次再开启,否则会潜伏着下次分页会再次执行
}
});
最后感悟吧,有可能一件事不同的人去做,因为各种因素会导致完成的程度和时间不一样,但是只要不放弃,用心思考其中的关键,坚持着去解决,一定会柳暗花明的;过程肯定会很不友好,但是带给我们的成就感只有自己体会。
加油,共勉。