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) 工具?

javascript - 在 Cytoscape.js 中动态添加数据

javascript - 获取 TinyMCE - gecko_spellcheck - 处理初始内容加载

javascript - 根据字段值更改页面加载时的按钮颜色

javascript - 如何防止使用 Parsleyjs 从 DOM 中删除表单验证错误

jquery - 为什么在我自己添加 jQuery 后,它本身(通过 Ajax)是 "reloading"?

javascript - 如何使用 FormattedMessage 将对象转换为字符串以使用 REACTJs 在 d3.js 图表中呈现标签?

javascript - 嵌套的任意对象在 javascript 中不起作用

javascript - 显示在复选框树中选择的选项

php - 复选框 onChange 提交表单