我有一个如下所示的 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);
最佳答案
尝试使用setTimeout
代替setInterval
。对请求使用 setInterval 通常是一个坏主意,因为请求可能会超时并导致一堆其他请求堵塞队列。但请务必在失败回调中也包含 setTimeout
。
关于javascript - 使用 jQuery 重新加载对象并间隔触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35068235/