javascript - 在循环内附加事件处理程序时浏览器性能出现问题

Question

我在创建插件时遇到问题。为变量 width 设置新值时出现问题。

如果用户调整 浏览器的大小，

width变量需要再次计算。如果我在循环内附加resize事件，则会导致性能出现问题。我想出了创建闭包函数来包装所有代码的想法。因此，当用户调整浏览器大小时，我会再次调用此函数。

JS:

var self         = this,
    onScrollbarY = function() {
        self.each(function() {  // loop it
            var el           = $(this),
                elLog        = el.find(".scrollbarYLog"),
                width        = $(window).innerWidth(),    // this value will change based on users browser width
                onMouseOver  = function() {
                    elLog.html(width);
                };
            elLog.on("mouseover", onMouseOver);
        });
    };
onScrollbarY(); // call it immediatly

$(window).on("resize", onScrollbarY); // if users resize its browser, call it again for getting new browser width

这是完成它的正确方法吗？或者还有其他比再次附加所有代码更有效的选项？

Answer 1

首先出现性能问题的原因是，每次调用 .on('resize', ...) 时，您都会注册一个在该事件上运行的函数。因此，在 5 个 resize 事件之后，每次都会调用 5 个函数，这就是导致速度变慢的原因。

有两种方法可以解决这个问题:

1. 仅将一个处理程序附加到该事件(您最终执行的操作)；或
2. 使用.one('resize', ...)事件处理程序来注册一个仅在下一个 resize 事件时触发的函数。

用例 #1 是大多数开发人员使用和推荐的用例。您创建一个函数(例如 onScrollbarY)，然后使用 .on() 注册该函数，以便在每次发生 resize 事件时调用该函数当你注册的那一刻。

情况 #2 非常罕见，您可能不想使用 .one() 除非您只想处理该事件的第一次出现，之后不再处理。如果您想处理多个事件，则必须在事件发生后再次调用 .one() 来告诉它再次监听该事件。

编辑:您可以将代码简化为以下内容:

var $window  = $(window),
    width    = $window.innerWidth(), // we know the initial width
    $elLog   = $(".scrollbarYLog"),  // we find the scrollbar element
    onResize = function() {
      width = $window.innerWidth();
    },
    onMouseOver = function() {
      $elLog.html(width);
    };

// register the resize function with the "resize" event
$window.on("resize", onResize);
// register the mouseover function with the "mouseover" event on the scrollbar
$elLog.on("mouseover", onMouseOver);

// there is no need to call onResize(), as we've already set the width variable