javascript - Jquery表单提交: infinite loop

Question

大家好，美好的一天。

我有一个问题，并且我已经有了可行的答案。我正在寻找答案的解释。

我有一个带有表单的普通 html 页面，表单的提交按钮在其 onclick 事件上有功能例如

<button type="submit" class="btn btn-danger" onclick="envoke()">Login</button>

在我的 javascript 文件中，我有以下代码

function envoke ()
{
  $('form:first').submit((e) => {
      e.preventDefault();
      loginAnimation();
  })
}

function loginAnimation()
{
  let w = window.innerWidth;
  $('#DIVbody').css({"position" : "relative"}).animate({left : "-=" + w + "px"}),2000,function () {
       $('form').first().submit();
  }
}

但是，由于 envoke() 函数不断被调用，因此该代码会导致无限循环，进而调用 loginAnimation() 函数。

代码的想法是阻止表单的正常提交，然后执行需要2秒才能完成的动画，动画完成后应该提交表单。

我通过更改 loginAnimation() 函数中的代码找到了解决方案:$('form').first().submit(); 更改为 $('form').off().first().submit();而且它有效!!

但是我不知道为什么，我一生都无法弄清楚。任何人都可以提供一个简单的解释或 Material ，我可以去研究以获得更好的想法。

PS。另外，这是我正在开发的一个旧项目，我记得 envoke() 和 loginAnimation() 函数过去工作得很好，现在(大约 2 个月后)它不起作用，我必须添加一点额外的 Jquery为了让它发挥作用，我的好奇心让我不知道为什么。

Answer 1

简单，evoke() 正在调用 loginAnimate()，而 loginAnimate() 又在调用 evoke()。

在 evoke() 中，您实际上绑定(bind)了 loginAnimate()，它将再次调用绑定(bind)器。 [无限循环]

function envoke ()
{
  $('form:first').submit((e) => {
      e.preventDefault();
      loginAnimation();
  })
}

function loginAnimation()
{
  let w = window.innerWidth;
  $('#DIVbody').css({"position" : "relative"}).animate({left : "-=" + w + "px"}),2000,function () {
       // $('form').first().submit();
  }
}