Mailchimp订阅成功时如何让父级订阅表单容器实现fadeout淡出

• 第1段代码错误：Mailchimp表单为异步提交，点击提交按钮的瞬间服务端响应还没返回，#mce-success-response的display状态尚未变更，此时的判断逻辑永远不会命中成功分支，因此无效果。
• 第2段代码错误：语法逻辑双错误，一是将读取display状态的css("display")误写为赋值操作css("display","block")，直接强制修改了成功提示的显示状态，没有做状态判断；二是缺失if判断关键字，代码结构不符合JS语法规范，无法正常执行。
• 第3段代码错误：存在三处错误，一是#mce-success-response的选择器遗漏了#标识，无法匹配到对应元素；二是无合法判断逻辑，选择器后直接跟代码块的写法不符合JS语法；三是$(this)指向提交按钮，其直接父元素不是#mc_embed_signup，使用parent()方法无法匹配到外层容器，就算逻辑触发也找不到要隐藏的元素。

核心逻辑是监听#mce-success-response的显示状态变化，不要在点击提交的瞬间做判断：

// 监听成功提示元素的属性变化
const successNode = document.getElementById('mce-success-response');
const observer = new MutationObserver(() => {
  if (window.getComputedStyle(successNode).display === 'block') {
    $('#mc_embed_signup').fadeOut(6500);
  }
});
observer.observe(successNode, { attributes: true, attributeFilter: ['style'] });

如果要兼容jQuery的写法，也可以在表单提交后定时轮询状态，更简单稳妥：

$('#mc-embedded-subscribe').click(function() {
  // 提交后每300ms检测一次成功提示状态，最多检测10次（覆盖正常异步请求时长）
  let checkTimes = 0;
  const checkTimer = setInterval(() => {
    if ($("#mce-success-response").css("display") === 'block') {
      $('#mc_embed_signup').fadeOut(6500);
      clearInterval(checkTimer);
    }
    checkTimes++;
    if (checkTimes > 10) clearInterval(checkTimer);
  }, 300);
});

内容的提问来源于stack exchange，提问作者dayoung jung