Question

我有一个非常庞大的jquery函数，并且为了使它更容易阅读，我想知道如何将它放在其他地方并且只在另一个函数内调用它（更具体地说，在ajax调用中，我现在定义的地方）。

问题在于，当我定义函数时，它会自动运行，我不希望这样。我希望它在ajax调用中运行，但不在那里定义。

以下是我所拥有的示例代码：

$.ajax({
    type: 'post',
    url: 'api/'+$("#id").val()+"/"+$("#from").val()+"/"+$("#to").val(),
    data: {},
    success: function generateChart(data) {
        var results = JSON.parse(data);
        if (results.error == true) {
            var errCode = results.code;
            alert(errCode);
        }
        else {
            var chartjsTemp = [];
            var chartjsDate = [];
            for (var i = 0; i < results.length; i++) {
                chartjsTemp.push(results[i].probeTemp);
                chartjsDate.push(results[i].dateProbe);
            }
            var ctx = document.getElementById('myChart').getContext('2d');
            var button = $("#submitButton");
            submitButton.addEventListener("click", function(){
                myChart.destroy();
            });
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: chartjsDate,
                    datasets: [{
                        label: 'temp',
                        data: chartjsTemp,
                        backgroundColor: "rgba(240,240,240,0.5)"
                    }]
                }
            });
        }
    }
});

我想将“generateChart”功能放在其他地方。如果我把它“放在其他地方”而只做“success: generateChart()"它就行不通，而是在页面加载时运行。

Answer 1

您应该能够将所有函数保存在变量中，而无需实际调用它们。

以下是一个例子：

＆＃13;

var myFunc = function(param1) {
  console.log(param1);
}

$(function() {
  myFunc('test');
  myFunc('test2');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

编辑：使用您的代码示例，它基本相同。只需在外部定义成功函数，然后在成功时调用它。如果您success: generateChart(data)，您还可以尝试：

success: function(data) { generateChart(data); }。

Answer 2

您应该调用外部函数，如下所示：

function extFunc(data){
  ...
}

$.ajax({
    type: 'post',
    url: 'xxx',
    data: {},
    success: function generateChart(data) {
      extFunc(data);
    }
});

Answer 3

只需将定义移到ajax调用之外：

function generateChart(data) {
    var results = JSON.parse(data);

    if (results.error == true) {
        var errCode = results.code;
        alert(errCode);
    } else {
        var chartjsTemp = [];
        var chartjsDate = [];
        for (var i = 0; i < results.length; i++) {
            chartjsTemp.push(results[i].probeTemp);
            chartjsDate.push(results[i].dateProbe);
        }
        var ctx = document.getElementById('myChart').getContext('2d');
        var button = $("#submitButton");
        submitButton.addEventListener("click", function(){
            myChart.destroy();
        });
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartjsDate,
                datasets: [{
                    label: 'temp',
                    data: chartjsTemp,
                    backgroundColor: "rgba(240,240,240,0.5)"
                }]
            }
        });
    }
} 



$.ajax({
    type: 'post',
    url: 'api/'+$("#id").val()+"/"+$("#from").val()+"/"+$("#to").val(),
    data: {},
    success: function(data) {
        generateChart(data);
    }
});

在没有事件的情况下立即调用函数（点击/悬停...）

3 个答案: