- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
稍后编辑
这个问题应该被删除,因为我报告的问题根本不是真实的。
没有“长链关闭”,那是我误解了 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/
拿这个: var lists:{ item1:{} ,item2:{} ,item3:{} ,item4:{} } 由于它基本上是空的,我想要一个函数(可能但不一定是 _lodash
我想更改 ng bootstrap 分页组件的样式并在 Angular 6 应用程序中使用 /deep/ 链接。以下代码工作正常,但控制台显示警告,指出该代码已被弃用。 那么,我应该如何更改它以消除警
使用 webcomponents,您可以使用 /deep/ 定位 shadowdom 的内部元素,在我尝试使用事件委托(delegate)之前它工作正常。 一个常规的点击功能将起作用: $('html
在 Swift 中,我试图实现一个单词 Trie,使用文字表示作为一系列嵌套的 NSObject。这是 Trie。 let GEENITRIE:NSObject = [ "i":[
运行 npm update 更新 package.json 中列出的项目;但是,这些项目的依赖关系仍然过时。 明显的解决方法是再次运行 npm update。有时我需要运行它 3 次以上才能使 npm
我创建了 2 级嵌套 linq 查询: var data = (from p in Departments join e in Employees on p.Id equals
首先是代码 #include typedef wchar_t* BSTR; wchar_t hello[] = L"Hello"; class _bstr_t { public: opera
我要编写一个 lisp 程序来生成十六进制数的实际值。我已经编写了一个函数,但似乎出现了 stackoverflow(深度)错误。我想知道是否有人可以指出我的错误或指导我朝着正确的方向前进。 如果没有
我想将每种类型都转换为boolean 或object type CastDeep = { [P in keyof T]: K extends K[] ? K[] : T[P] ex
我刚刚发现自己在写这个: fn init_timestamps(dir: &PathBuf, file_timestamps: &'static HashMap) { match fs::re
我有一个现有的 pybind11::array_t,需要进行复制构造。 pybind11 中是否有一个函数允许我对 array_t 进行深度复制? 我知道我可以创建一个新的 array_t,适当调整大
引用http://www.devx.com/tips/Tip/13291 ,它说我可以使用 memcpy 来复制由 sizeof() 确定的大小,但是,数组不是指向指针吗? 除了遍历数组,如何使用 m
我有多个成员(member),每个成员(member)都有一条记录,其中包含几个备注字段: Member ID Entry A Entry B 1 [memo t
$watchCollection 是否能够忽略对以 $ 开头的属性的更改?使用深度 $watch 时已经存在此行为,因为它依赖于 angular.equals 进行比较。 理想情况下,$watchCo
我有一个带有复杂键的 map - 例如,二维数组: m := make(map[[2][3]int]int) 当我在映射中插入一个新键时,Go 是否会对该键进行深度复制? a := [2][3]int
我需要查询如下所述的三个表。我了解简单的 JOIN,但是这个有点超出我的水平。 courses 有两列 id (PK) 和 courseTitle(示例 id 1,courseTitle 物理) cl
我有一个对象,它是 Realm 的 Object 子类,并且符合 Codable 以便在与 API 对话时与 JSON 相互转换。 如何利用 Codable 协议(protocol)进行深度复制(包括
我是一名优秀的程序员,十分优秀!