javascript - 使用 jQuery 重新加载对象并间隔触发函数

Question

我有一个如下所示的 file.js:

var mycompliments = {
        interval: 2000,
        fadeInterval: 4000,
        morning: [
            'Good morning, handsome!',
            'Enjoy your day!',
            'How was your sleep?'
        ],
        afternoon: [
            'etc'
        ],
        evening: [
            'chaning'
        ]
}

该数据被另一个函数使用并显示在前端。

如何触发此文件的重新加载并每 X 秒执行该函数以更新前端的内容？

使用此数据的文件如下所示:

var compliments = {
    complimentLocation: '.compliment',
    currentCompliment: '',
    complimentList: {
        'morning': mycompliments.morning,
        'afternoon': mycompliments.afternoon,
        'evening': mycompliments.evening
    },
    updateInterval: mycompliments.interval || 30000,
    fadeInterval: mycompliments.fadeInterval || 4000,
    intervalId: null
};

compliments.updateCompliment = function () {

    var _list = [];

    var hour = moment().hour();

    if (hour >= 3 && hour < 12) {
        _list = compliments.complimentList['morning'].slice();
    } else if (hour >= 12 && hour < 17) {
        _list = compliments.complimentList['afternoon'].slice();
    } else if (hour >= 17 || hour < 3) {
        _list = compliments.complimentList['evening'].slice();
    } else {
        Object.keys(compliments.complimentList).forEach(function (_curr) {
            _list = _list.concat(compliments.complimentList[_curr]).slice();
        });
    }

    var _spliceIndex = _list.indexOf(compliments.currentCompliment);

    if (_spliceIndex !== -1) {
        _list.splice(_spliceIndex, 1);
    }

    var _randomIndex = Math.floor(Math.random() * _list.length);
    compliments.currentCompliment = _list[_randomIndex];

    $('.compliment').updateWithText(compliments.currentCompliment, compliments.fadeInterval);

}

compliments.init = function () {

    this.updateCompliment();

    this.intervalId = setInterval(function () {
        this.updateCompliment();
    }.bind(this), this.updateInterval)
}

我尝试过设置 setinterval，但没有成功。

function functionToLoadFile(){
    jQuery.get('js/mycompliments.js', function(data) {

        var loaded = data;
        console.log(loaded);
        compliments.updateCompliment(loaded);

        setTimeout(functionToLoadFile, 5000);

});
}
setTimeout(functionToLoadFile, 5000);

更新:

现在控制台显示该文件每 5 秒重新加载一次，但并未更新到前端。我认为没有正确传递到 updateCompliment 函数中？

更新2:

控制台记录以下内容:

var mycompliments = {
    interval: 2000,
    fadeInterval: 4000,
    morning: [
        'Good morning, handsome!',
        'Enjoy your day!',
        'How was your sleep?'
    ],
    afternoon: [
        'etc'
    ],
    evening: [
        'wowowow'
    ]
}

更新3

我已经设法每 5 秒更新一次 compliments，但我似乎无法触发 Compliments.updateCompliment();从函数内部!

function functionToLoadFile(){
    jQuery.get('js/mycompliments.js', function(data) {

        var compliments = {
            complimentLocation: '.compliment',
            currentCompliment: '',
            complimentList: {
                'morning': mycompliments.morning,
                'afternoon': mycompliments.afternoon,
                'evening': mycompliments.evening
            },
            updateInterval: mycompliments.interval || 30000,
            fadeInterval: mycompliments.fadeInterval || 4000,
            intervalId: null


        };
        console.log(compliments);

        setTimeout(functionToLoadFile, 5000);

        compliments.reload = function () {

            compliments.updateCompliment(compliments);
        }
    });

}
setTimeout(functionToLoadFile, 5000);

Answer 1

尝试使用setTimeout代替setInterval。对请求使用 setInterval 通常是一个坏主意，因为请求可能会超时并导致一堆其他请求堵塞队列。但请务必在失败回调中也包含 setTimeout。