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

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 像素，该功能将不会执行，并且当您将鼠标悬停时，面板将保持可见。我试图通过在 else 条件下返回 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');
        }
});