我正在尝试编写一个函数,其中一部分仅运行一次。到目前为止,我已经可以使用它了,但是理想情况下,我希望它可以在不添加全局变量的情况下运行。我已经读过有关闭包的信息,但是我对闭包的理解不够,或者无法在我的实例中使用闭包。
请记住,这是我首次尝试使用香草javascript而不是jQuery的项目。因此,没有jQuery的答案。
这是我的代码:
var videoLoaded = false;
function loadItem(element) {
// If item is Video
if( element.tagName == 'VIDEO' ) {
if(videoLoaded != true) {
// Load and play the video;
element.setAttribute('preload', 'auto');
element.play();
videoLoaded = true;
/* Push the dimensions through
* to the videoFill function
*/
element.addEventListener( 'loadedmetadata', function(e) {
var dimensions = [element.videoWidth, element.videoHeight, document.documentElement.clientWidth, document.documentElement.clientHeight]
videoFill(element, dimensions);
});
}
dimensions = [element.videoWidth, element.videoHeight, document.documentElement.clientWidth, document.documentElement.clientHeight]
videoFill(element, dimensions);
}
}
多谢您的协助!
最佳答案
以下是使用闭包(在这种情况下为立即调用的函数表达式[IIFE])防止创建全局变量的方法:
var loadItem = (function() { // This function will be immediately invoked
var videoLoaded = false; // This var only exists in our IIFE context, not global scope
function loadItem(element) {
if( element.tagName == 'VIDEO' ) {
// loadItem() will still have access to videoLoaded even after the IIFE has completed and returned
if(videoLoaded != true) {
element.setAttribute('preload', 'auto');
element.play();
videoLoaded = true;
element.addEventListener( 'loadedmetadata', function(e) {
var dimensions = [element.videoWidth, element.videoHeight, document.documentElement.clientWidth, document.documentElement.clientHeight]
videoFill(element, dimensions);
});
}
dimensions = [element.videoWidth, element.videoHeight, document.documentElement.clientWidth, document.documentElement.clientHeight]
videoFill(element, dimensions);
}
}
return loadItem; // Return the function
}()); // Immediately invoke the IIFE closure