我正在尝试编写一个函数,其中一部分仅运行一次。到目前为止,我已经可以使用它了,但是理想情况下,我希望它可以在不添加全局变量的情况下运行。我已经读过有关闭包的信息,但是我对闭包的理解不够,或者无法在我的实例中使用闭包。

请记住,这是我首次尝试使用香草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

09-10 01:08
查看更多