setInterval导致内存泄漏

时间:2018-10-04 12:50:46

标签: javascript fetch setinterval fetch-api

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

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

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

2 个答案:

答案 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));
})();