Vue.js使用定时器定时刷新在线人数

谁践踏了优雅 2022-05-08 05:36 425阅读 0赞

今天有个任务是：每隔两分钟刷新页面显示的在线人数。因为我之前做的获取消息数量用的Vue.js，所以这个就继续用Vue.js来配合搞定了，因为有属性的双向绑定，确实非常的好用。当然了，如果你只是简单的使用js来搞定，可以看下面的菜鸟教程

[http://www.runoob.com/w3cnote/js-timer.html][http_www.runoob.com_w3cnote_js-timer.html]

下面是我自己用Vue.js来搞定的例子，可以参考一下：

/**
    * 获取消息数量（未读）和在线人数
    *@author howinfun
    */
    var messageCountVm = new Vue({
    	el : '#messageCountUl',
    	data : {
    		messageCount : '',//消息数量
    		onlineMembers : 0,//在线人数
    	},
    	mounted : function() {
    		this.$nextTick(function() {
    			var _this = this;
    			_this.getMessageCount();
    			_this.getOnlineMembers();
    		})
    	},
    	filters : {},
    	methods : {
    		getMessageCount : function() {
    			var _this = this; 
    			var url = 'loginController.do?getMessageCount';
    			var data = {};
    			$.post(url,data,function(rec){
    				if(rec.success){
    					var count = rec.obj;
    					_this.messageCount = count;
    				}
    			},"json");
    		},
    		getOnlineMembers : function() {
                          //先调用一次，给onlineMembers赋值
    			this.getCount();
    			/* 每隔两分钟刷新在线人数
    			第一个参数为要调用的函数（记得不要带括号）
                             第二个参数是定时的时间间隔（这里为两秒钟 */
    			setInterval(this.getCount,1000 * 120);
    		},
    		getCount : function(){
    			var _this = this; 
    			var url = 'loginController.do?getOnlineMembers';
    			var data = {};
    			$.post(url,data,function(rec){
    				if(rec.success){
    					var count = rec.obj;
    					_this.onlineMembers = count;
    				}
    			},"json");
    		}
    	}
    });

[http_www.runoob.com_w3cnote_js-timer.html]: http://www.runoob.com/w3cnote/js-timer.html