问题描述:
在做一个微信公众号开发的时候,使用的技术是jQuery技术,并非是Vue.js的技术,很多东西无法从插件市场进行获取,昭仪一些jQuery的插件下拉刷新的,但是效果并非是特别好,甲方不太满意,叫UI设计了稿子,如何开始一步步写,在遇到写jQuery下拉刷新的时候,IOS出现一个问题,下拉数据会出现重复的,而安卓不会出现重复,因为下拉刷新是做了分页,后端使用的是
若依分页
,所以我这边传值过去的时候通过后端Dbug
发现IOS发送的请求只请求了两次,并且渲染数据出现了问题,存在重复的数据,而在安卓端是不存在这样的行为的
由于数据设计保密,无法展示出现的图片,我通过一个简单的示例图展示一下这个问题:
大概意思就是:我下拉加载的数据应该是右边实线的pageNum = 2 的数据,但是IOS获取的任然是pageNum = 1 的数据,出现重复的数据。
我以为是Ajax的问题,可能是异步编程倒是,于是我使用了 async await
进行尝试,结果在IOS手机测试的时候发现没啥用 (这里指给函数定义失败) ;我也使用了通过boolean
进行控制是否执行下拉刷新进行解决这个问题,但是也是不行的;然后我换了一种方法,使用定时器的方式进行setTimeout
进行,最终也是失败告终,后面是通过后台断DBUG
查看下拉传递的值,发现 pageNum = 1 加载, pageNum = 2 加载,到 pageNum = 3 获取的时候,没有发送请求
,我通过前端加alert()
查看这个count 执行了第几次,发现使用这个alert
进行控制是可以的,使用这个alert()
会影响用户的体验,最终没有采取这个方式进行解决。
下拉刷新的代码:
$(document).ready(function () { $("#companyDetailList").unbind("scroll").bind("scroll", function () { var sum = this.scrollHeight; if (sum <= $(this).scrollTop() + $(this).height()) { getDetailData(); } }); });
我是这样想的,同一套代码,在不同系统运行结果差异很大,安卓的正常显示,IOS的出现BUG,可能是因为IOS中将ajax分别执行了两次,第一次是异步的ajax,第二次可能是同步的Ajax,导致出现两次请求,渲染的数据也出现重复。(仅仅我最初个人的猜想)
但是通过alert() 可以阻止这个重复的问题,于是我在想,是不是这个异步编程需要一个操作进行唤醒,就好比一个Java的进程进入一个休眠的模式,需要某个东西进行唤醒;而IOS下拉加载的时候是不是需要某一个事件阻止二次触发或者唤醒IOS内部的某个机制---------(这都是我的猜想)
。
我通过两种方式:
方式一:
一个就说alert() ,比如定义一个data,一次性拿30条数据,在执行完获取数据的函数以后,提示一个alert() 进行唤醒我认为的某个机制
阻止二次出现这个任务;
方式二:
给Ajax中的添加一个async: false
,然后在IOS和安卓都可以进行正常的操作了!(推荐)
function getData(type, url, data, callback) { $.ajax({ type: type, url: prefix + url, async: false,//同步请求 data: data, success: function (res) { //成功否, back, 服务器端响应度信息 callback(res); }, error: function () { //如果错误则错误信息。 $.modal.alertWarning("请求数据失败"); } }) };
上述均是自己的踩坑点,可能有存在不合理的分析,注:均是自己的个人主观意识!不具备专业性哈,互喷。