Javascript与eachover冲突

我有两个java脚本，一个用于在进度条中显示结果百分比，另一个用于在不同的进度条中显示速度

目前，只有一个条正在恢复数据，而另一个条则没有

**Javascript*

//  Progress bar javascript reults
    {
        var elem = document.getElementById("myBar");
        var width = 0;
        var id = setInterval(frame, 50);

        function frame() {
            if (width >= document.getElementById("results-percentile-2").innerHTML) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
                document.getElementById("demo").innerHTML = width * 1 + '%';
            }
        }
    }

    // End javascript progress bar results

    // Progress bar javascript speed
    {
        var elem = document.getElementById("myBarspeed");
        var width = 0;
        var id = setInterval(frame, 50);

        function frame() {
            if (width >= document.getElementById("results-speed").innerHTML) {
                clearInterval(id);
            } else {
                width++;
                elem.style.width = width + '%';
                document.getElementById("speed").innerHTML = width * 1 + '%';
            }
        }
    }

    // End javascript progress bar speed

HTML

 <div class="scale-container-main ">
                        <div id="percentile-scale" class="scale">

                            results bar: Your results
                            <div id="demo">0%</div>
                            <div class="myProgress">
                                <div id="myBar" style="width:0"></div>
                            </div>

                            speed bar: Your speed
                            <div id="speed">0%</div>
                            <div class="myProgress">
                                <div id="myBarspeed" style="width:0"></div>
                            </div>

                        </div>
                    </div>

结果栏：你的结果
0%
速度栏：你的速度
0%

不能有两个同名函数。将一个“frame”函数重命名为其他函数，并在setInterval中对其进行更改。还可以使用不同的变量来存储间隔。

您可以在每个块中使用

let

而不是var，并且

let frame = function() { .... }

但帧必须移动到setInterval线上方

此外，以上仅适用于最近的优秀兄弟，这意味着它在IE中不起作用

另一种同样有效的方法是使用IIFE——这在IE中有效

(function() {
    var elem = document.getElementById("myBar");
    var width = 0;
    var id = setInterval(frame, 50);

    function frame() {
        if (width >= document.getElementById("results-percentile-2").innerHTML) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
            document.getElementById("demo").innerHTML = width * 1 + '%';
        }
    }
}());

// End javascript progress bar results

// Progress bar javascrip speed
(function() {
    var elem = document.getElementById("myBarspeed");
    var width = 0;
    var id = setInterval(frame, 50);

    function frame() {
        if (width >= document.getElementById("results-speed").innerHTML) {
            clearInterval(id);
        } else {
            width++;
            elem.style.width = width + '%';
            document.getElementById("speed").innerHTML = width * 1 + '%';
        }
    }
}());

---

上面提到的唯一优点是变量名是有用的、有意义的，并且保证不会与其他任何东西发生冲突（某种程度上）

js是无效的，你在屏蔽框架函数和var，这两个块不是孤立的范围——JavaScript不像C++——除非你使用<代码>让代替现代的浏览器中的<代码> var >代码（这意味着你可以忘记IE）@利亚姆——它是有效的，而不是good@JaromandaX,我怎样才能使这项工作正确地在IEA上工作作为下面答案的替代，你可以把这两个块放在单独的生活中。。。i、 e.

（function（）

{…您的代码…}

（））

hmm，即使在函数名更改之后仍然不起作用，因为有一些变量与wellHmm立即调用的函数相同，Ok+1不仅是一个有效的答案，而且帮助我改进和理解javascrip。我仍在努力改进mt javascript，这对我帮助很大，谢谢。关于使用let，这会更有效吗？有效吗？它更“现代”，但我不知道效率如何（我自己也不把基准测试到N度）——目前的问题是Internet Explorer的普及，这意味着我们必须为最低的公分母编码。。。如果你想编写仍然在几乎所有地方运行的现代代码，看看balbel之类的东西，好吧，我正在处理很多遗留的js atm，我在考虑typescript，但我会看看balbelbabel，它允许你使用ES2015/ES6+跨浏览器中定义的现代javascript技术-it“透明文件”为傻瓜编写javascript:p我的意思是为旧浏览器编写javascript