js_脚本之家,Javascript延迟执行实现方法

日期:2019-12-16编辑作者:澳门金莎娱乐手机版

先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好

1。延迟切换tab 需求:页面上有几个tab,切换tab的时候,会对某个特定区域的数据进行拉取更新。
弊端:用户从第一个tab切换一直快速切到尾,就会产生n个ajax请求。其实用户只是需要看到最后一个tab的数据。

也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来

复制代码 代码如下:

 Title   click click click click click  var arr=[ function;}, function;}, function;}, function;}, function;} ]; var seti=setInterval.click{ clearInterval seti=setInterval],1000) })

 Title  click0 click1 click2 click3 click4    var vm1 = new Vue({ el: '#vm', data: { arr:[ function;}, function;}, function;}, function;}, function;} ], time1:'', time2:'', show:'', num:0, }, methods: { tab: function{ //如果每个tab的方法不一样,提前用一个数组把方法保存起来 clearInterval this.time1=setInterval //以下是调用同一种方法的时候可以不需要设置数组 this.num = 0 clearInterval this.time2 = this.fun }, fun:function{ var _this=this; return setInterval{ //写个随机数显示在页面,具体业务需求应该是ajax请求 var random=String(parseInt*100000000000)) //字符一个一个显示在页面上 _this.show=index+random.substring; },300) } }, mounted:function(){ this.time1=setInterval } });

var changeTab = function(){
var timeId = 0;
return function(tabId){
if(timeId){
clearTimeout(timeId);
timeId=0;
}
setTimeout(function(){
//ajax do something
},500);
};
}();

以上所述是小编给大家介绍的基于Vue实现tab栏切换内容不断实时刷新数据功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

一个比较简单的例子,绑定在tab上的onmouseover,如果用户不停的来回切换tab,ajax请求不会执行,只有停顿500毫秒后,才会执行,500毫秒,其实蛮短的,基本上不会影响到用户体验。

2。延迟自动完成 需求:在文本输入框中,监听用户输入,实现自动完成功能。
弊端:用户每输入一个字符,都会产生一个ajax请求,如果用户连续输入了一长串内容,请求次数就很多,实际上,最后的那次,才是用户需要的。
代码与上面例子类似。

3。延迟滚动 需求:页面的广告,需要用户滚动到哪,就跟到哪。
弊端:用户滚动在底,触发了N次的让广告重新定位的函数。其实,只需要当用户停下的时候,才触发一次就足够了。
代码与1类似。

其实有很多这样这样的例子,有些事情,不需要马上去执行,可以延迟一点时间才执行,时间很短,不影响用户体验,又可以减少很多不必要的消耗。

需求:页面上有几个tab,切换tab的时候,会对某个特定区域的数据进行拉取更新。 弊端:用户从第一个tab切换一直快速切到...

本文由澳门金莎娱乐网站发布于澳门金莎娱乐手机版,转载请注明出处:js_脚本之家,Javascript延迟执行实现方法

关键词:

JavaScript数据结构之二叉树的删除算法示例_javas

如果待删除节点只包含一个子节点,那么原本指向它的节点就得使其指向它的子节点。 遍历右子树,直到右子树的某...

详细>>

【澳门金莎娱乐手机版】JavaScript数据结构之二叉

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算...

详细>>

form表单通过ajax提交文件

前面分享了用js将json数据下载为csv文件,方便后期管理。但是对于测试人员更希望能够以页面的形式展现任务,所以...

详细>>

方法_基础知识_脚本之家,Math对象有关方法以及

JavaScript Math.floor 方法 Math.floor方法用于对数值向下取整,即获取小于或等于该数值的最大整数。语法如下: num++(后...

详细>>