Question

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

$(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;
    }
  });

该功能是一种悬停功能，可在悬停时隐藏面板。预期的行为/目标是，一旦我低于769像素，该功能将不会执行，当您悬停时，面板将保持可见。我试图通过在我的其他情况下返回false来做到这一点。

经过进一步研究，return: false;与e.preventDefault();类似，因为它可以防止发生默认操作以及冒泡事件。

如何根据窗口大小阻止这些函数的触发？我的另一个问题是性能 - 可以看出，对于窗口调整大小的每个像素，函数都被触发了！

我已经检查并尝试了JavaScript Allow various functions to execute only if some condition is true的变体，但我没有发现它有用。

Answer 1

您没有有条件地执行操作，您有条件地分配事件处理程序。一旦它被分配，它就会每次都运行。无论何时调整窗口大小，您所做的就是多次重新分配相同的事件处理程序。

相反，将事件处理程序分配一次以使其始终适用，然后检查事件处理程序中的条件。像这样：

$('.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');
        }
});

Answer 2

$('.panel').hover(

这个逻辑正在为用户在元素上悬停时发生的元素创建绑定。这是在此之后，完全独立于窗口大小。如果你不想在某些情况下发生悬停，那么逻辑需要在你的悬停逻辑中，而不仅仅是调整大小。

而且fwiw，在滚动事件处理程序中重复悬停绑定并不是最佳做法，并且最有可能创建许多重复绑定。

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

2 个答案: