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

2022/1/29 6:07:49

本文主要是介绍在IOS使用jQuery实现下拉刷新时候,IOS端会出现重复的数据 (安卓正常使用) 的解决方案,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

出现的问题

问题描述:

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

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



这篇关于在IOS使用jQuery实现下拉刷新时候,IOS端会出现重复的数据 (安卓正常使用) 的解决方案的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程