Access outer function param without passing in inner function

Question

I have a function which does an async call & calls an anonymous function on success.The data param of anonymous function is used to collect the response from the server but it is not available inside the inner function unless passed as a param.

callService('POST', getDataInfo, detailData, function (data) {
            formDisplayGrid('.accruedGrid', '.accruedTable', 'Total Accrued');//doesn't work.
            formDisplayGrid(data,'.accruedGrid', '.accruedTable', 'Total Accrued'); //works
           });

callService is just a function which uses jQuery ajax to place a call.

function callService(method, url, data, success) {
        var ajaxObject = {
            url: url,
            method: method,
            dataType: 'json',
            success: success
        }
        if (method == 'POST') {
            ajaxObject['data'] = data;
        }
        jQuery.ajax(ajaxObject);
    }

formDisplayGrid function just iterates over dataset to form HTML table.

function formDisplayGrid(data, modalSelector, mainGridSelector, totalLabel) {    
    jQuery(modalSelector).modal();
    if (typeof data != 'undefined' && data.Code === 200) {
        var mainGrid = jQuery(mainGridSelector);
        var tbody = '';

        jQuery.each(data['Data']['category'], function (k, v) {
            //some code here.
            jQuery.each(v['subcat'], function (k, v) {
                //some code here.
            });    
        });    
                //some code here.
        mainGrid.find('tbody').html(tbody).fadeIn(1200);
    }
}

Is that this is happening because the anonymous function is being executed in the jQuery.ajax function and it should have been available if the anonymous function was directly executed inside the callService function?

Answer 1

这个概念基本上很简单，你的formDisplayGrid（）函数是回调函数的外部函数，因此它不应该访问该回调函数中的私有变量。但是如果你想要第一种方法工作你将不得不定义函数在回调函数中。

Answer 2

Your formDisplayGrid function won't be able to access any variables from where it was called unless those variables are global or they are in a closure.

EDIT: your function has to get its data argument from somewhere - otherwise how is it going to know what data is?. There is a good reason that only the second one works.

EDIT2: here is a solution with a closure:

callService('POST', getDataInfo, detailData, function (data) {
    function formDisplayGrid(modalSelector, mainGridSelector, totalLabel) {
        // you no longer need the data variable    
        jQuery(modalSelector).modal();
        if (typeof data != 'undefined' && data.Code === 200) {
            var mainGrid = jQuery(mainGridSelector);
            var tbody = '';

            jQuery.each(data['Data']['category'], function (k, v) {
            //some code here.
                jQuery.each(v['subcat'], function (k, v) {
                //some code here.
                });    
            });    
                //some code here.
            mainGrid.find('tbody').html(tbody).fadeIn(1200);
        }
    }
    formDisplayGrid('.accruedGrid', '.accruedTable', 'Total Accrued');//should work.
});