时间戳

首页 > 解决方案 > 另一个未捕获的 RangeError：最大调用堆栈大小难题

javascript - 另一个未捕获的 RangeError：最大调用堆栈大小难题

问题描述

我已经查看了有关此主题的先前问答，但我也许只是没有看到错误...

基本上，我有一个表单，底部有一个带有这个事件处理程序的按钮......

（整个设置是一个运行在 Chrome 上的 JS/JQuery/Bootstrap 接口到链接到 MySQL 的 node.js/express.js 服务器，但这些因素在这里似乎不相关。）

    //create 
$('#createform').on('click', '.create', function (e) {
  e.preventDefault();

  var userid = $("#user_id1").val();
  var job_title = $("#job_title").val();
  var description = $("#description").val();
  var requirement = $("#requirement").val();
  var location = $("#location").val();
  var company_id = $("#company_id1").val()
  var oontact_id = $("#contact_id").val()
  var resume_id = $("#resume_id").val()
  var status = $("#status").val()
  var notes = $("#notes").val();
  var rating = $("#rating").val()
  console.log("create job button pushed [", userid, "] [", job_title, "] [", company_id, "] [", status, "] ");
  $.ajax({
    url: "/api/job",
    type: "POST",
    data: {
      user_id1: userid,
      job_title: job_title,
      description: description,
      requirement: requirement,
      location: location,
      company_id: company_id,
      contact_id: contact_id,
      resume_id: resume_id,
      status: status,
      notes: notes,
      rating: rating
    },
    dataType: "json",
    success: function (data) {
      console.log(data);
      //location.reload(); // force reload to see new entry
    },
    error: function (error) {
      console.log("Error ")
      console.log(error);
    }
  });
});

控制台中的表单没有错误。点击“创建”按钮（调用这部分代码）后，我得到控制台日志“按下创建作业按钮......”和正确的输入，确认变量已填充。然后浏览器冻结，没有调用传递给服务器。

浏览器错误堆栈显示

“Uncaught RangeError Maximum call stack size exceeded at Dt (jquery 3.5.0.min.js:2)” 无限重复

Chrome 自己的分析器证实了这一点（正在检查/性能）

我已经多次检查这部分代码。昨天，一个非常相似的代码（不同的表，不同的字段）运行良好，没有发生任何事故，但我制作这个代码/这个表的尝试失败了。我以为是location.reload，但它从来没有那么远。失败是在 jQuery 中，老实说，我看不出我在哪里搞砸了。

我检查了典型的，比如传递 val()...（我传递了从 val() 读取的变量，从不直接传递）。

我尝试过使用或不使用preventDefault，但它不存在。

在那个 Ajax 调用中有一些东西，但是什么？

标签： javascriptjquery

解决方案

我发现了问题。真的很晦涩难懂。

事实证明，当我将几个东西命名为相同时，jQuery 感到困惑。这是我的输入字段之一：

          <div class="form-group">
            <input type="text" name="job_title" 
             id="job_title" class="form-control" 
             placeholder="job title" required="required">
          </div>

正如您在上面注意到的，我有一个名为相同的变量。

 var job_title = $("#job_title").val();

并馈入ajax数据位。

   data: {
      user_id1: userid,
      job_title: job_title,
...

不知何故，当代码看起来像这样时，jQuery 在尝试取消引用名称、ID、字段和其余部分时感到非常困惑。这就是导致堆栈耗尽的原因。

不知何故，当只有 3-4 个字段时，这不是问题。但是当您在一个表单上有 10 多个字段时，它必须对每个字段进行多次迭代，并且堆栈空间已经耗尽。

这已通过 1) 从表单字段中删除“名称”属性（不需要已设置“id”的它们）和 2）消除变量冲突来解决。只要 ajax 获得正确的键名和值名，它就不会真正关心那里的数据。

您的特定解决方案会有所不同，但这至少是我解决此问题的方式。

推荐阅读