在IOS使用jQuery实现下拉刷新时候，IOS端会出现重复的数据 (安卓正常使用) 的解决方案

2022-01-28 23:35:09 阅读：259 来源： 互联网

标签：jQuery function pageNum 安卓 IOS alert 刷新数据

出现的问题

问题描述：

在做一个微信公众号开发的时候，使用的技术是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("请求数据失败");
            }
        })
    };

上述均是自己的踩坑点，可能有存在不合理的分析，注:均是自己的个人主观意识！不具备专业性哈，互喷。

标签：jQuery,function,pageNum,安卓,IOS,alert,刷新,数据
来源： https://blog.csdn.net/weixin_47024018/article/details/122737378