Question

我们的代码显然做错了，但是我们似乎无法理解。如果要在特定间隔内获取文件，为什么不能使用此代码？

<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个小时后，我们就在计算机中填充了此图片。

我们应该如何构建此功能以免发生较大的内存泄漏？

Answer 1

尝试此代码，它将停止：

   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)

Answer 2

在此处发布，因为代码太长，无法发表评论。我认为这可能是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));
})();

setInterval导致内存泄漏

2 个答案: