JavaScript RangeError - 使用 jQuery.post 时超出最大调用堆栈大小

Question

当使用 jQuery 的 .post() 函数提交表单数据时，我收到未捕获的 RangeError:超出了最大调用堆栈大小。

我知道这通常意味着递归，但我看不到递归发生在哪里。

我已将发布请求放入函数 (submitRequest()) 中，这样我就可以从代码中的两个不同点提交数据。它最初驻留在提交事件中，并且当时工作得很好。当我把它移到外面时，错误就出现了。

有什么想法吗？

JavaScript 代码(带有注释日志，以便您可以看到流程):

$(document).ready(function() {
    var downloadLink = '',
        downloadName = '',
        details,
        detailsSaved = false;

    $('.js--download').click(function(event) {
        var self = $(this);
        event.preventDefault();
        downloadLink = self.data('filePath'); // Store clicked download link
        downloadName = self.closest('.brochure').find('.brochure__name').html().replace('<br>', ' ');
        if (!detailsSaved) {
            $('#brochure-section').addClass('hide');
            $('#capture-section').removeClass('hide');
            $('html, body').animate({
                scrollTop: $("#capture-section").offset().top
            }, 500);
        } else {
            submitRequest();
        }
        return false;
    });

    $(".submit-btn").click(function(event) {
        var antiSpam = $('input[name=url]').val();
        if (antiSpam != "") {
            outputResultText('Error - Please leave the spam prevention field blank', 'error');
            proceed = false;
            event.preventDefault();
            return false;
        }        

        var name = $('input[name=name]').val(),
            company = $('input[name=company]').val(),
            email = $('input[name=email]').val(),
            phone = $('input[name=phone]').val(),
            proceed = true;

        if(name==""){
            $('input[name=name]').addClass("error");
            proceed = false;
        }
        if(phone==""){
            $('input[name=phone]').addClass("error");
            proceed = false;
        }
        if(email==""){
            $('input[name=email]').addClass("error");
            proceed = false;
        }

        if(!proceed) {
            outputResultText('Please check all required fields', 'error');
            event.preventDefault();
            return false;
        }

        event.preventDefault();
        if(proceed) {
            console.log('About to request'); // Logged out
            submitRequest();
        }

        return false;
    });

    //reset previously set border colors and hide all message on .keyup()
    $("input, textarea").keyup(function() {
        $(this).removeClass("error");
        $(".form-result").fadeOut(100);
    });

    function submitRequest () {
        console.log('Start submitRequest'); // Logged out

        if (!detailsSaved) {
            console.log('Details are NOT saved');
            post_data = {
                'name': name,
                'company': company,
                'phone': phone,
                'email': email,
                'brochure': downloadName,
                'brochure_url': downloadLink
            };
            details = post_data;
        } else {
            console.log('Details are saved');
            post_data = details;
            post_data['brochure'] = downloadName;
            post_data['brochure_url'] = downloadLink;
        }
        console.log('Posting data'); // Logged out
        // CRASH: Uncaught RangeError: Maximum call stack size exceeded 

        $.post(bcf_local_args['post_url'], post_data, function(response){ 
            console.log('Response received');
            if(response.type != 'error') {
                if (detailsSaved) {
                    outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.<br>Want it sent to a different email? Simply refresh the page and try again.");
                } else {
                    //reset values in all input fields
                    $('#brochure-capture-form input').val('');
                    $('#brochure-capture-form textarea').val('');
                    $('#capture-section').addClass('hide');
                    $('#brochure-section').removeClass('hide');
                    outputAlert("Thank you for your request to receive our <strong>'"+downloadName+"'</strong> brochure.<br>We'll send you a copy soon to <strong>'"+email+"'</strong>, so please check your inbox.");
                }
                if (!detailsSaved) {
                    detailsSaved = true;
                }
                $('html, body').animate({
                    scrollTop: $(".brochure__alert").offset().top
                }, 500);
            } else {
                outputResultText(response.text, response.type); 
            }
        }, 'json');
    }

    function outputResultText (text, status) {
        var output = '';
        if(status == 'error') {
            output = '<div class="error">'+text+'</div>';
        } else {
             output = '<div class="success">'+text+'</div>';
        }
        $(".form-result").hide().html(output).fadeIn(250);
    }

    function outputAlert (text) {
        var output = '<div>'+text+'</div>';
        $('.brochure__alert').hide().removeClass('hide').html(output).slideDown(250);
        setTimeout( function() {
            $('.brochure__alert').slideUp(250);
        }, 6500);
    }

    // function accessStorage(action, dataKey, dataValue) {
    //     if(typeof(Storage) === "undefined") {
    //         // No support for localStorage/sessionStorage.
    //         return false;
    //     } 
    //     if (action == 'store') {
    //         localStorage.setItem(dataKey, dataValue);
    //     } else if (action == 'retrieve') {
    //         return localStorage.getItem(dataKey);
    //     }
    // }
});

Answer 1

我不知道您是否已经找到解决方案，但我遇到了“相同”的问题。

在我的代码中，我有一个在上传图像后调用的函数，并且我将图像名称作为参数以及 POST 数据所需的其他参数传递。

经过一番研究，我发现浏览器在传递参数方面有一些限制，因此问题不在于 AT $.post，而在于我的函数调用。

我不知道技术术语，但我“过度使用了堆栈参数”。

所以也许你的问题也不在于你的$.post，而是超出堆栈的其他问题。

希望这有帮助。

[]的