如何优化javascript答案

【问题标题】：How optimizing javascript如何优化javascript
【发布时间】：2021-12-27 10:36:48
【问题描述】：

是否有另一种方法可以重写此代码以更优化，因为我看到它在 mousemove 操作中非常重复，还有 if 条件

    if (dept === "Parlement européen") {
        var popup_topo = $("<div class='popup_topo'><strong>" + dep + "<br/>" + total + " parrainages</strong></div>");
        $(this).on("mousemove", function (event) {
          if ($(window).width() < 480) {
            var x = event.pageX - $(this).offset().left - 45;
            var y = event.pageY - $(this).offset().top + 30;
          } else if ($(window).width() > 480) {
            var x = event.pageX - $(this).offset().left + 30;
            var y = event.pageY - $(this).offset().top + 30;
          }
          $(this).append(popup_topo);
          popup_topo.css({
            top: `${y}px`,
            left: `${x}px`,
          });
        })
        .on("mouseleave", function (event) {
          popup_topo.remove();
        });
      }
      else {
        var popup_topo = $("<div class='popup_topo'><strong>" + dept + "<br/>" + total + " parrainages</strong></div>");
        $(this).on("mousemove", function (event) {
          if ($(window).width() < 480) {
            var x = event.pageX - $(this).offset().left - 45;
            var y = event.pageY - $(this).offset().top + 30;
          } else if ($(window).width() > 480) {
            var x = event.pageX - $(this).offset().left + 30;
            var y = event.pageY - $(this).offset().top + 30;
          }

          $(this).append(popup_topo);
          popup_topo.css({
            top: `${y}px`,
            left: `${x}px`,
          });
        })
        .on("mouseleave", function (event) {
          popup_topo.remove();
        });
     }

【问题讨论】：

两者之间的实际区别是什么？几乎所有内容看起来都相同，期待您的弹出内容 - 您在第一个中使用了 dep，在第二个中使用了 dept，尽管目前我无法确定这是故意的还是错字。
“重复”是轻描淡写。最上面的if 的这两个分支完全一样。 diffchecker.com/0igrOb5U（保存部门/部门错字）。所以你可以去掉最上面的条件，只留下一个分支，消除所有的重复。
我的代码正在运行，我只是想知道我们是否可以进一步优化它...
如果这不是错字，您可以删除一个分支并将第一行替换为var popup_topo = $(`<div class='popup_topo'><strong>${dept === "Parlement européen" ? dep : dept}<br/>${total} parrainages</strong></div>`); 结果：jsfiddle.net/thx3gvqr

标签： javascript jquery optimization

【解决方案1】：

这里有几个简单的建议：

mousemove 事件（至少是香草版本，我假设 jQuery 是类似的）被频繁调用。如果您想处理更少的代码，您可以设置迭代之间的最短时间。
您在两个地方对y 使用了相同的定义；您可以在条件块之外只定义一次。
正如评论者所提到的，您的外部条件语句可能应该完全删除。

（注意：您可能不需要或不想包含 if ($(window).width() > 480) ——除非您有理由将正好 480 的宽度视为未指定格式的特殊情况。）

【讨论】：