Javascript 仅当条件为真时才执行函数

我只想在条件（特别是我的窗口大小）为真时启动函数。我的代码如下所示：

$(window).resize(function() {
    console.log("window resized");
    if ($(window).width() > 769) {
      $('.panel').hover(
        function() {
          $(this).children('.initial').addClass('hide');
          $(this).children('.hover').addClass('show');
        }, function() {
        $(this).children('.initial').removeClass('hide');
        $(this).children('.hover').removeClass('show');
      }
      );
    } else {
        return false;
    }
  });

$('.panel').hover(
    function() {
        if ($(window).width() > 769) {
            $(this).children('.initial').addClass('hide');
            $(this).children('.hover').addClass('show');
        }
    }, function() {
        if ($(window).width() > 769) {
            $(this).children('.initial').removeClass('hide');
            $(this).children('.hover').removeClass('show');
        }
});

该函数是一个悬停函数，悬停时隐藏面板。预期的行为/目标是，一旦我低于769像素，函数将不会执行，当您悬停时，面板将保持可见。我试图通过在else条件下返回

false

来实现这一点

进一步研究后，

返回：false

类似于

e.preventDefault（）因为它可以防止发生默认操作以及事件冒泡

如何根据窗口大小阻止这些函数启动是最好的方法？我的另一个关注点是性能——可以看出，窗口每调整一个像素，函数就会启动

我已经签出并尝试了的变体，但我觉得它没有帮助

$('.panel').hover(

此逻辑在元素上创建绑定，当用户将鼠标悬停在该元素上时会发生绑定。这是在这一点之后，完全独立于窗口大小。如果您不希望在某些情况下发生悬停，那么该逻辑需要在悬停逻辑中，而不仅仅是调整大小

而fwiw，在scroll事件处理程序中重复悬停绑定不是最佳实践，很可能会创建许多重复绑定

此逻辑在元素上创建绑定，当用户将鼠标悬停在该元素上时会发生绑定。这是在这一点之后，完全独立于窗口大小。如果您不希望在某些情况下发生悬停，那么该逻辑需要在悬停逻辑中，而不仅仅是调整大小

fwiw，在滚动事件处理程序中重复悬停绑定不是最佳做法，很可能会创建许多重复绑定。
您不是有条件地执行操作，而是有条件地分配事件处理程序。一旦它被分配，它将每次运行。只要调整窗口的大小，就可以多次重新分配相同的事件处理程序

相反，只需分配一次事件处理程序，使其始终适用，然后检查事件处理程序内部的条件。大概是这样的：

$(window).resize(function() {
    console.log("window resized");
    if ($(window).width() > 769) {
      $('.panel').hover(
        function() {
          $(this).children('.initial').addClass('hide');
          $(this).children('.hover').addClass('show');
        }, function() {
        $(this).children('.initial').removeClass('hide');
        $(this).children('.hover').removeClass('show');
      }
      );
    } else {
        return false;
    }
  });

$('.panel').hover(
    function() {
        if ($(window).width() > 769) {
            $(this).children('.initial').addClass('hide');
            $(this).children('.hover').addClass('show');
        }
    }, function() {
        if ($(window).width() > 769) {
            $(this).children('.initial').removeClass('hide');
            $(this).children('.hover').removeClass('show');
        }
});

您不是有条件地执行操作，而是有条件地分配事件处理程序。一旦它被分配，它将每次运行。只要调整窗口的大小，就可以多次重新分配相同的事件处理程序

相反，只需分配一次事件处理程序，使其始终适用，然后检查事件处理程序内部的条件。大概是这样的：

$(window).resize(function() {
    console.log("window resized");
    if ($(window).width() > 769) {
      $('.panel').hover(
        function() {
          $(this).children('.initial').addClass('hide');
          $(this).children('.hover').addClass('show');
        }, function() {
        $(this).children('.initial').removeClass('hide');
        $(this).children('.hover').removeClass('show');
      }
      );
    } else {
        return false;
    }
  });

$('.panel').hover(
    function() {
        if ($(window).width() > 769) {
            $(this).children('.initial').addClass('hide');
            $(this).children('.hover').addClass('show');
        }
    }, function() {
        if ($(window).width() > 769) {
            $(this).children('.initial').removeClass('hide');
            $(this).children('.hover').removeClass('show');
        }
});

您需要从else块的.panel中删除悬停侦听器，而不是使用调整大小处理程序。在代码中，您要将悬停事件绑定数百次。您需要从else块的.panel中删除悬停侦听器。而不是使用调整大小处理程序。在代码中，您要将悬停事件绑定数百次。