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

标签 javascript jquery

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

$(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 的变体但我没有发现它有帮助。

最佳答案

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

相反,分配事件处理程序一次,以便它始终适用,然后检查事件处理程序内部的条件。像这样:

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

关于javascript - 仅当条件为真时才执行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45491384/

相关文章:

javascript - 更改事件类以及导航丸中的内容

javascript - 以纯文本和html格式显示ajax的响应

javascript - Kendo 网格行选择客户端持久化问题

php - 在通过 ajax 加载页面/内容后初始化 video.js

jquery - 位置固定的顶部导航栏在 Firefox 中表现异常

javascript - 早午餐环境覆盖文件

javascript - d3 中身份函数 ("function(d) { return d; }"的简写是什么?

javascript - 分页后复选框不会保持选中状态

java - 浏览器尝试保存对 AJAX 请求的 JSON 响应而不是处理它

jquery - 使用slidetoggle显示内容,想根据当前情况显示+和-按钮