我们的代码显然做错了,但是我们似乎无法理解。如果要在特定间隔内获取文件,为什么不能使用此代码?
<html>
<head>
<script>
let interval = 2
function fetchSource(source) {
fetch(source, { cache: 'no-cache' })
.then(response => {
console.log('Memory-bloating')
})
}
function test() {
fetchSource('https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg')
}
setInterval(test, interval * 1000)
</script>
</head>
<body>
Memory-bloating in chrome
</body>
</html>
这里的问题是,每次获取时,我们都会随着图像的大小增加内存,并且似乎永远不会收集到垃圾。当网站运行了大约2-3个小时后,我们就在计算机中填充了此图片。
我们应该如何构建此功能以免发生较大的内存泄漏?
答案 0 :(得分:0)
尝试此代码,它将停止:
let interval = 2
let handle = ""
let still_fetching = false
function fetchSource(source) {
fetch(source, { cache: 'no-cache' })
.then(response => {
console.log('Memory-bloating')
clearInterval(handle)
still_fetching = false
handle = null
handle = setInterval(test, interval * 1000)
})
}
function test() {
if(still_fetching){
return;
}
still_fetching = true;
fetchSource('https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg')
}
handle = setInterval(test, interval * 1000)
答案 1 :(得分:0)
在此处发布,因为代码太长,无法发表评论。我认为这可能是Chrome错误,但是通过阻止并发下载,您也许可以确认这一点。
以下是与@McBern的代码等效的更干净的代码,它消除了循环依赖和维护其他状态的需要:
let interval = 2
function fetchSource(source) {
return fetch(source, { cache: 'no-cache' }) // NB: return
.then(response => {
console.log('Memory-bloating')
})
}
}
(function test() {
let url = 'https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg';
fetchSource(url).then(() => setTimeout(test, interval * 1000));
})();