8***@qq.com
8***@qq.com
  • 发布:2018-06-15 18:00
  • 更新:2018-06-15 22:06
  • 阅读:1102

【报Bug】HelloMui工程中的 tab_pullrefresh回调函数响应快被重复调用的问题

分类:MUI

详细问题描述
[内容]

发现多tab页面中的下拉刷新是mui单独另外写的脚本,有以下疑问,求赐教:

HelloMui工程中给出的示例pullrefresh_width_tab.html示例为:tab选项卡模式中的下拉加载示例有个问题,在往上拉动去加载数据时,手不要放开持续往上拉动,此时如果触发的上拉事件响应较快时,会造成上拉事件被多次调用。HelloMui中的这个示例中在up(或down)的callback函数中给出的示例代码是有个setTimeout(1000)毫秒延迟,该延迟后触发self.endPullDownToRefresh();结束上拉效果,恰巧避免了这种问题,因为1秒钟的时间足够callback中创建一组dom元素再追加到数据列表了。

不太好描述,不知道说清楚了没有。正常情况一般不会重复被调用,关键就是拖动后事件已触发并且手继续不停的拖动,就导致实际上已调用了endPullUpToRefresh方法了,而由于手还没有松开导致的事件持续调用触发。

setTimeout(1000)其实还是会多次触发请求,为了容易复现可将其去掉,代码如下:

$(pullRefreshEl).pullToRefresh({  
                            down: {  
                                callback: function() {  
                                    var self = this;  
                                    console.log("ddddddddddddddddd");  
                                    var ul = self.element.querySelector('.mui-table-view');  
                                    ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);  
                                    self.endPullDownToRefresh();  
                                }  
                            },  
                            up: {  
                                callback: function() {  
                                    var self = this;  
                                    console.log("uuuuuuuuuuuuuuu");  
                                    var ul = self.element.querySelector('.mui-table-view');  
                                    ul.appendChild(createFragment(ul, index, 5));  
                                    self.endPullUpToRefresh();  
                                }  
                            }  
                        });

重现步骤
[步骤]
[结果]
[期望]

运行环境
[系统版本]
[浏览器版本]
[IDE版本]
[mui版本]

附件
[代码片段]
[安装包]

联系方式
88911006@qq.com
[QQ]
[电话]

2018-06-15 18:00 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

试了下将代码中的实际的回调函数处加上了1000毫秒的setTimeout效果凑合,另外给回调处加上了函数调用间隔时间的判断,如:当函数调用与上次调用之间超过3秒(或5秒)以上才为真正的用户有效请求。同时在不满足情况时的pull的状态设置为结束。

up: {  
                    callback: function() {  
                        var self = this;  
                        console.log("up...");  
                        setTimeout(function(){  
                            pullupRefresh(self);  
                        } , 1000);  
                    }  
                }
var currentTime = new Date().getTime();  
    if(currentTime - window._timeInterval > 3000){  
        window._timeInterval = currentTime;  
    } else {  
        console.log("时间太短,,,不触发");  
        self.endPullUpToRefresh(false);  
        return;  
    }

该问题目前已经被锁定, 无法添加新回复