Question

所以我正在写一个网站，我正在从头开始制作一个下拉菜单。这包括一个标签，一旦指针悬停在它上面，下拉菜单就会变得可见，所有这些都包装在一个容器中。为了确保容器尺寸没有毛刺（这是必要的，因为它是可见的），我有两个选择。解决此问题的一种方法是调用函数来更新容器的大小三次，一次在mouseenter（）上，第二次在mouseleave（）上，第三次在$（window）.ready（）上。但是，另一种方法是每隔60秒调用该函数调整容器大小，无论条件如何。两种方式似乎都有效，但我不确定哪一种更好/更正。这将是第一选择：

$(document).on('mouseover', '.dropdown_container',
    function() {
        setContainerDimensions(this);
    }
)
.on('mouseleave', '.dropdown_container',
    function() {
        setContainerDimensions(this);
    }
);

$(document).ready(
    function() {
        setContainerDimensions('.dropdown_container');
    }
);

这将是第二个选择：

window.setInterval(function(){
    setContainerDimensions(".dropdown_container");
}, 16);

这是我的html：

<ul class="dropdown_container">
    <li class="tab super_tab"><a>Order</a></li>

    <ul class="dropdown">
        <li class="tab"><a>Cater</a></li>
    </ul>
</ul>

正如您所看到的，第二种方式的代码效率更高，但我不确定这是否正确。你们觉得怎么样？

另外，如果你能想出一个更好的选择，那就更好了。

谢谢！

Answer 1

除非您在谈论大量代码，否则加载一些额外代码可能不会产生明显影响。它会使初始页面加载速度变慢，并使用更多浏览器内存，但在初始加载后对性能影响不大。

相反，经常运行不必要的代码（频繁每秒60次）可能会降低页面的响应速度，因为它会在用户尝试使用时中断浏览器。然而，实际影响将取决于功能的价格。如果setInterval可以替换为响应用户驱动事件而运行的代码，则应该避免{{1}}小间隔。

Answer 2

当然使用更多代码。

使用间隔意味着多次调整是不必要的并且浪费了。我建议避免频繁执行代码，这可能会降低整个页面的速度。

更多代码绝对可以。现代浏览器实际上非常快速地加载和执行。

在这种情况下使用间隔可以吗？

2 个答案: