加载事件方法备忘，chrome和firefox快速刷新的错误及解决办法

最新推荐文章于 2023-02-19 18:53:50 发布

何日成熟

最新推荐文章于 2023-02-19 18:53:50 发布

阅读量1.3k

点赞数

分类专栏：前端备忘文章标签：浏览器前端快速刷新页面加载

本文链接：https://blog.csdn.net/u013836242/article/details/77526100

版权

前端备忘专栏收录该内容

54 篇文章 5 订阅

订阅专栏

加载方面的事件方法备忘
问题
解决方法
具体代码
- abortAll方法
- 自定义的ajax请求方法

加载方面的事件方法备忘：

onload和load的区别
 onbeforeunload和onunload的区别

问题：

测试发过来bug，说——频繁F5刷新页面，会闪现未加载完样式的页面；
开发用的Chrome，没发现这个问题，测试用的firefox，于是从浏览器的刷新加载机制方面搜索解决办法，没搜到，运气好，最后找到了解决办法
firefox下频繁F5刷新还有个问题——可能ajax未请求完成就刷新了，Chrome下是刷新就自动canceld，但是firefox好像不是，上一次请求的结果因为刷新页面所以执行了error方法，页面闪现一下error方法的结果知道新的页面请求完成。最后想了个办法，刷新就手动取消所有ajax请求

解决方法：

显示未渲染完全的页面：

<head>标签里加上<script>标签，里面放js的onload方法

    <script>
        window.onload=function(){};
    </script>

刷新页面时手动取消当前所有ajax请求：
XMLHttpRequest对象及其方法
 终止当前页面所有还在请求中的AJAX请求

具体代码：

abortAll()方法：

//定义存储当前还在请求的ajax请求的容器
$.xhrPool = [];
//定义断开所有ajax请求的方法
$.xhrPool.abortAll = function() {
    $(this).each(function(idx, jqXHR) {
        jqXHR.abort();
    });
    $.xhrPool = [];
};

//所有ajax请求的默认配置
$.ajaxSetup({
    beforeSend: function(jqXHR) {
        //发送之前存储当前请求到容器
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.xhrPool.indexOf(jqXHR);
        if (index > -1) {
            //完成之后从容器清除当前请求
            $.xhrPool.splice(index, 1);
        }
    }
})

在header里接着unload写入：

window.onunload=function () {
    $.xhrPool.abortAll();
}

自定义的ajax请求方法：

第一次更正：

function zdyAjax(url, obj, method, datatype, success, err) {
    $.ajax({
        url: url,
        data: obj,
        timeout: 5000,  //设置超时时限
        type: method,
        cache: false,
        datatype: datatype ? datatype : "json",
        success: function (data) {
            success(data);
        },
        error: function (event,textStatus) {
            //当前请求容器为空或错误原因为超时时才执行err
            if($.xhrPool == [] || textStatus=="timeout"){
                err ? err(event) : alert("原函数error");
            }
        }
    });
};

错误原因：

之前没搞清楚ajax里各个回调方法的执行顺序，实际上，complete是在error之后执行的。
而且！！！abort后请求会继续执行error。
本来的思路是：unload后执行error，因为xhrPool为空所以不会执行error判断。但是这本身就有问题——当没有unload时，xhrPool绝对不会为空，因为至少有正在执行error的这个jqXHR在xhrPool中，这就会导致无论什么时候都不会执行error。
另外，经过测试，error比unload中的abortAll()更快执行。
设置变量检测当前是否已经unload了也不行。

第二次更正：

jquery ajax error函数详解
 AJAX问题之XMLHttpRequest status = 0
jQuery ajax请求错误返回status 0和错误error的问题

function zdyAjax(url, obj, method, datatype, success, err) {
    $.ajax({
        url: url,
        data: obj,
        timeout: 5000,  //设置超时时限
        type: method,
        cache: false,
        datatype: datatype ? datatype : "json",
        success: function (data) {
            success(data);
        },
        error: function (jqXHR,textStatus,errorthrown) {
            //当前请求容器为空或错误原因为超时时才执行err
            if(jqXHR.status!==0 || textStatus=="timeout"){
                err ? err(jqXHR) : alert("原函数error");
            }
        }
    });
};

总结：

在发现之前的问题后，我先是用了errorthrown做判断条件，但errorthrown除了会显示abort之外，最多的还是显示“”为空，因为大部分的error执行的比abortAll()快
改用status做判断条件，status为0，说明当前是中断，或者unsent,opened，则不执行error
但是！通过Chrome的调试可以看出，同样是status为0，有canceled和failed两种状态，这个还找不到办法判断。
之所以要判断canceled和failed，是因为前面的timeout，因为有个页面请求时间很长才返回结果所以设置了timeout。当请求这个页面时，有可能是timeout了，调试会显示canceled，status为0，另外一种情况是，请求直接失败了（这个完全不知道咋回事儿，也没unload啊，实际上也是成功发给服务器了啊，可能是因为这个请求发送后会断开和服务器的连接再重连吧？），这种情况下显示是failed，没有超时，status同样为0。这时不会执行error了，不符合预期
这样的情况下，只能调试着看failed时用了多长时间，再把timeout设的比最短时间再小一些，凑合着用吧。

何日成熟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
加载事件方法备忘，chrome和firefox快速刷新的错误及解决办法

加载方面的事件方法备忘： onload和load的区别 onbeforeunload和onunload的区别问题：测试发过来bug，说——频繁F5刷新页面，会闪现未加载完样式的页面；开发用的Chrome，没发现这个问题，测试用的firefox，于是从浏览器的刷新加载机制方面搜索解决办法，没搜到，运气好，最后找到了解决办法firefox下频繁F5刷新还有个问题——可能ajax未请求
复制链接

扫一扫