javascript - 防止覆盖运行函数

Question

所以我有一个在 getDate 函数之后运行的时钟，它工作得非常顺利。我可以开始运行时钟的 wrapp，当单击 wrap 时，它开始使用事件处理程序移动。问题是我可以在没有之前停止工作的情况下运行时钟乘法时间。我知道这些函数正在相互覆盖，我一直在尝试围绕该函数移动，但我一直无法启动乘法时钟。

我有包装其他函数的 Clock() 函数。我有一个 createWrapp()，它动态创建函数的类，然后我有一个事件列表器，它在单击包装时启动时钟。

三者是这样的。

function clock(){
    function createWrapp(){
        createElementsWithClass;
    } 
    createWrapp();
    function Wrapp(){
        eventlistner connected to "clock-window-wrapper"
    }
    function myFunction(){ 
        startClock();
    }
}

这是我的 jsFiddle。

http://jsfiddle.net/dymond/nufwb/1/

谢谢

Answer 1

问题是 几乎 createWrapp 中的所有变量都是隐式全局变量。连续调用 clock() 将覆盖它们，只有最后创建的时钟才会滴答作响。使用 var statements !

将其更改为:

function clock() {

    var outerDiv = createElementWithClass('div', 'clock-window-wrapper'),
        innerDiv = createElementWithClass('div', 'clock-menubar-wrapper');
    outerDiv.appendChild(innerDiv);
    document.getElementById("page-content-wrapper").appendChild(outerDiv);

    var clock_windows_wrapper_close = createElementWithClass('div', 'close');
    innerDiv.appendChild(clock_windows_wrapper_close);

    var clock_toolbar_wrapper_close = createElementWithClass('div', 'clock-content-wrapper');
    outerDiv.appendChild(clock_toolbar_wrapper_close);

    var hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
    clock_toolbar_wrapper_close.appendChild(hours);
    clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this ##WTF

    var minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
    clock_toolbar_wrapper_close.appendChild(minutes);
    clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this ##
    var seconds = createElementWithClass('ul', 'clock-digit-wrapper second');
    clock_toolbar_wrapper_close.appendChild(seconds);

    var hour1 = createElementWithClass('li', "clock-digit-four");
    var hour2 = createElementWithClass('li', "clock-digit-one");
    hours.appendChild(hour1);
    hours.appendChild(hour2);

    var minute1 = createElementWithClass('li', "clock-digit-three");
    var minute2 = createElementWithClass('li', "clock-digit-three");
    minutes.appendChild(minute1);
    minutes.appendChild(minute2);

    var sec1 = createElementWithClass('li', "clock-digit-three");
    var sec2 = createElementWithClass('li', "clock-digit-seven");
    seconds.appendChild(sec1);
    seconds.appendChild(sec2);

createWrapp 作为一个单独的函数实际上是不必要的，因为它只被调用一次并且没有变量是它的局部变量。