Vue.js使用定时器定时刷新在线人数-蒲公英云

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

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

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");
        }
    }
});