Javascript 使用jQuery在间隔内重新加载对象和触发函数

我有一个file.js，如下所示：

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

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

function load_script() {   
  $.getScript('js/mycompliments.js', function() {
    time = setTimeout(function() {
      load_script();
    }, 30 * 1000);
  }); 
}; 
load_script();

此数据由另一个函数使用并显示在前端

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

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

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

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

function load_script() {   
  $.getScript('js/mycompliments.js', function() {
    time = setTimeout(function() {
      load_script();
    }, 30 * 1000);
  }); 
}; 
load_script();

更新：

现在，控制台显示该文件每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秒钟更新一次赞美之词，但我似乎无法触发赞美之词；从函数内部

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

---

确保将

setInterval（functionToLoadFile，5000）放入文件中在实际函数之外
函数加载文件

重新更新2:实际上，您并没有使用从“js/mycompliments.js”获取的恭维来更新恭维对象。新获取的赞美词存储在
loaded
变量中，但您不会对该数据执行任何操作。在运行
compaims.updateCompliment（）函数之前，需要使用新获取的数据更新
compaims
对象

重新更新3:

目前，您的代码存在许多问题，因此有几个原因说明它不起作用


您已经在恭维对象上定义了一个重载函数，当它被执行（aka调用）时，它将执行（aka调用）updateCompliment函数。没有调用updateCompliment的原因是您从未调用过重载函数。（顺便说一句，在这里定义一个重载函数没有任何意义；只需直接调用updateCompliment函数即可）
您仍然没有使用正在获取的数据。如果您不打算对数据做任何事情，那么jQuery.get（'js/mycompliments.js'，函数（数据）{…}）
是毫无意义的
我仍然怀疑你从服务器返回的数据是否真的是你认为的那样
首次初始化时的恭维对象与您所说的从服务器返回的对象略有不同。如果您实际使用的是来自服务器的数据，这可能会导致您出现问题
您当前没有使用
拼接索引
变量，因此如果您打算使用它，请使用它或删除该代码
您不需要总是
slice（）
数组

我想我不能再帮你了。这个问题可能超出了您当前的Javascript技能水平。我并不是说放弃，但我认为你还有很多东西要学，我无法用一个堆栈溢出问题的答案来回答所有问题。
一定要把你的
设置间隔（functionToLoadFile，5000）在实际函数之外
函数加载文件

重新更新2:实际上，您并没有使用从“js/mycompliments.js”获取的恭维来更新恭维对象。新获取的赞美词存储在
loaded
变量中，但您不会对该数据执行任何操作。在运行
compaims.updateCompliment（）函数之前，需要使用新获取的数据更新
compaims
对象

重新更新3:

目前，您的代码存在许多问题，因此有几个原因说明它不起作用


您已经在恭维对象上定义了一个重载函数，当它被执行（aka调用）时，它将执行（aka调用）updateCompliment函数。没有调用updateCompliment的原因是您从未调用过重载函数。（顺便说一句，在这里定义一个重载函数没有任何意义；只需直接调用updateCompliment函数即可）
您仍然没有使用正在获取的数据。如果您不打算对数据做任何事情，那么jQuery.get（'js/mycompliments.js'，函数（数据）{…}）
是毫无意义的
我仍然怀疑你从服务器返回的数据是否真的是你认为的那样
首次初始化时的恭维对象与您所说的从服务器返回的对象略有不同。如果您实际使用的是来自服务器的数据，这可能会导致您出现问题
您当前没有使用
拼接索引
变量，因此如果您打算使用它，请使用它或删除该代码
您不需要总是
slice（）
数组

我想我不能再帮你了。这个问题可能超出了您当前的Javascript技能水平。我不是说放弃，但我认为你还有很多东西要学，我无法用一个堆栈溢出问题的答案来回答所有问题。
尝试使用
setTimeout
代替
setInterval
。对请求使用
setInterval
通常是个坏主意，因为请求可能会超时，并导致大量其他请求阻塞队列。但也要确保在故障回调中包含
setTimeout
。
尝试使用
setTimeout
而不是
setInterval
。对请求使用
setInterval
通常是个坏主意，因为请求可能会超时，并导致大量其他请求阻塞队列。但也要确保在故障回调中包含
setTimeout
。
您可以尝试以下方法：

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

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

function load_script() {   
  $.getScript('js/mycompliments.js', function() {
    time = setTimeout(function() {
      load_script();
    }, 30 * 1000);
  }); 
}; 
load_script();

您可以尝试以下方法：

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

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

function load_script() {   
  $.getScript('js/mycompliments.js', function() {
    time = setTimeout(function() {
      load_script();
    }, 30 * 1000);
  }); 
}; 
load_script();

您是否对functionToLoadFile进行初始调用？因为您的代码似乎没有在任何地方调用此函数，
console.log（loaded）
的输出是什么样子的（请参见
functionToLoadFile
中的第4行