Question

我有一个项目，我需要预先加载100多张图片，但我不想通过100个非常短的请求垃圾邮件托管图像的服务器。

为了解决这个问题，我试图创建一个设置间隔的函数，每个迭代预加载一个图像。当没有任何东西要加载时，间隔被清除。如果在第一个间隔仍在运行时再次调用该函数，它将提前退出该函数。

此时，这是一个概念性问题。为什么这个片段：

var ids = [1, 2, 3, 4, 5];

function logger() {
    var logging = false;
    var interval = {};

    function log() {
        if (ids.length) {
            console.log(ids.shift());   
        } else {
            console.log('Logging done!');
            clearInterval(interval);
            logging = false;
        }
    }

    return (function() {
        if (!logging) {
            console.log('Logging started!');
            logging = true;
            interval = setInterval(log, 250);
            return null;
        } else {
            console.log('Logging already started!');
            return null;
        }
    })()
}

//First call to logger
logger();

//Add a few more elements to ids array
ids = ids.concat([6, 7, 9, 9, 10]);

//Call logger again
logger();

开始两次间隔，同时记录一对元素？如果您想查看此代码段的行为，请点击此处JSFiddle。

- 编辑 -

感谢大家的帮助:)。我现在意识到logging和interval没有被保存。为了在不声明全局变量的情况下保存它们，我只需要使声明自动执行，而不是立即调用返回的函数。

Answer 1

我弄清楚了，并意识到为什么我现在得到了意想不到的行为。这就是我的目标：

var ids = [1, 2, 3, 4, 5];

var logger = (function() {
    var logging = false;
    var interval = {};

    function log() {
        if (ids.length > 0) {
            console.log(ids.shift());   
        } else {
            console.log('Logging done!');
            clearInterval(interval);
            logging = false;
        }
    }

    return function() {
        if (!logging) {
            console.log('Logging started!');
            logging = true;
            interval = setInterval(log, 250);
            return null;
        } else {
            console.log('Logging already started!');
            return null;
        }
    }
})()

//First call to logger
logger();

//Add a few more elements to ids array
ids = ids.concat([6, 7, 9, 9, 10]);

//Call lagger again
logger();

我只是在返回的函数上放了一个闭包，当我真的应该包装初始声明时。以下是上述代码的JSFiddle。

Answer 2

@deceze你是对的。每次调用记录器时都会记录var记录。只需将该标志设为全局变量。

为什么我的间隔开始两次？

2 个答案: