gpt4 book ai didi

javascript - 不断迭代 Promise 会导致堆栈过深

转载 作者:行者123 更新时间:2023-12-02 16:07:55 26 4
gpt4 key购买 nike

稍后编辑

这个问题应该被删除,因为我报告的问题根本不是真实的。

没有“长链关闭”,那是我误解了 google chrome watch 窗口。

任何内存泄漏都可能是由于视频元素未正确清理而导致的。这是一个不同的问题,已在其他问题中得到解决。

<小时/>我正在编写 Javascript 代码来不断循环播放列表。播放列表上的项目是图像(显示 10 秒)或视频。

这是一些执行此操作的代码(处理图像或视频)

var IMAGE = 0;
var VIDEO = 1;

var mediaElements = [{
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Rembrandt_van_Rijn_-_Self-Portrait_-_Google_Art_Project.jpg/180px-Rembrandt_van_Rijn_-_Self-Portrait_-_Google_Art_Project.jpg',
mediaType: IMAGE
}, {
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/269px-English_Pok%C3%A9mon_logo.svg.png',
mediaType: IMAGE
}, {
url: 'http://www.w3schools.com/html/mov_bbb.mp4',
mediaType: VIDEO
}, {
url: 'https://upload.wikimedia.org/wikipedia/en/thumb/3/34/Teuchitlan_scale_model_1_cropped.jpg/133px-Teuchitlan_scale_model_1_cropped.jpg',
mediaType: IMAGE
}, {
url:
'https://upload.wikimedia.org/wikipedia/en/f/f7/Sugimoris025.png',
mediaType: IMAGE
}


];

$(function () {

function displayMediaFile(mediaFile) {
$('#imageTarget').empty();
if (mediaFile.mediaType === IMAGE) {
$('#imageTarget').append($('<img />').attr('src', mediaFile.url));
return new Promise(function (resolve, reject) {
window.setTimeout(resolve, 2000);
});
} else {
var videoElement = $('<video></video>').attr('autoplay', '');
var sourceElement = $('<source><source>')
.attr('src', mediaFile.url)
.attr('type', 'video/mp4')
.appendTo(videoElement);
videoElement = videoElement.appendTo('#imageTarget');
return new Promise(function (resolve, reject) {
videoElement[0].onended = resolve;
});
}
};


function iterateThroughPlaylist(index) {
if (index >= mediaElements.length) {
index = 0;
}
console.log('displaying image ' + index);
displayMediaFile(mediaElements[index]).then(function () {
iterateThroughPlaylist(index + 1);
});
}

iterateThroughPlaylist(0);
});

查看此jsfiddle完整的工作示例。

因此实际的“displayMediaFile”函数返回一个 Promise。当游戏完成时,这个 promise 就解决了,然后我们继续下一个图像。

问题是,它在一段时间后停止运行。我在 iterateThroughImages 方法中放置了一个断点,然后查看了调用堆栈。我可以看到一条非常长的闭包链。

我可以以同样的简单性生成代码,但以某种方式避免让运行时将闭包保留在内存中吗?

最佳答案

Promise 似乎并不是最好的解决方案。

var imageUrls = [ url1, url2, url3, url4  ];
(function play(index){
console.log('displaying image ' + index);
var url = imageUrls[index];
$('#imageTarget').empty().append($('<img />').attr('src', url));
window.setTimeout(play, 2000, (index+1)%imageUrls.length);
})(0);

如果您有其他操作要链接,您仍然可以在内部使用 Promise,但不要构建无限的 Promise 链。

旁注:您实际上不必删除并重新创建 img 元素,您只需更改其 src 属性即可。

关于javascript - 不断迭代 Promise 会导致堆栈过深,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30544400/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com