时间戳

首页 > 解决方案 > 为什么javascript回调函数没有执行？

javascript - 为什么javascript回调函数没有执行？

问题描述

有人可以解释为什么 loadData(symbol) 之后的回调函数没有被调用吗？我有这个功能：

    function plotChart(symbol) {
        alert("symbol: " + symbol);
        var data = loadData(symbol, function(){
            console.log("data: ",data);
        });
    }

我希望在完成log.console后执行loadData，但没有任何输出。

万一这很重要，这里是 loadData 函数。

    function loadData(symbol) {
    count = 0;
    quotes = [];
    $.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30", function(data) {
        data.forEach(function(item){
            var quote = {};
            quote.date   = item.id.date.substring(0,10);
            quote.open   = item.open;
            quote.high   = item.high;
            quote.low    = item.low;
            quote.close  = item.close;
            quote.volume = item.volume;
            quotes.push(quote); //put quote in array
        });
        console.log("quotes: ",quotes);  
        return quotes;
    });
}

在这里，console.log 成功地正确打印出引号。

编辑：根据@Aluan，我将代码更改为如下所示：

    function plotChart(symbol) {
        loadData(symbol).then(function(data) {
            console.log("data: ", data);
        });
    }

    function loadData(symbol) {
        quotes = [];
        $.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=" +symbol +"&startDate=2020-01-01&endDate=2020-09-30") 
            .then(function (data) {
            const quotes = data.map(function(item) {
                return {
                    date: item.id.date.substring(0,10),
                    open: item.open,
                    high: item.high,
                    low : item.low,
                    close: item.close,
                    volume: item.volume
                };
            });
            console.log("quotes: ",quotes);  
            return quotes;
        });
    }

但现在我收到错误：Uncaught TypeError: Cannot read property 'then' of undefined at plotChart (moneymachine.html:120) at HTMLTableRowElement。

第 120 行是 loadData(symbol).then(function(data) {

标签： javascriptjqueryjson

解决方案

的定义loadData对于理解原因至关重要。

给定

function loadData(symbol) {
    count = 0;
    quotes = [];
    $.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30", function (data) {
        data.forEach(function (item) {
            var quote = {};
            quote.date   = item.id.date.substring(0, 10);
            quote.open   = item.open;
            quote.high   = item.high;
            quote.low    = item.low;
            quote.close  = item.close;
            quote.volume = item.volume;
            quotes.push(quote); //put quote in array
        });
        console.log("quotes: ", quotes);  
        return quotes;
    });
}

我们可以看到它定义了一个参数，symbol。你可以在调用它时传递额外的参数，但它显然不使用它们。

当你写

var data = loadData(symbol, function () {
    console.log("data: ", data);
});

第二个参数被简单地忽略了。

这是一个loadData接受并使用回调的第二个参数的示例。

function loadData(symbol, callback) {
    count = 0;
    quotes = [];
    $.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30", function(data) {
        data.forEach(function(item){
            var quote = {};
            quote.date   = item.id.date.substring(0, 10);
            quote.open   = item.open;
            quote.high   = item.high;
            quote.low    = item.low;
            quote.close  = item.close;
            quote.volume = item.volume;
            quotes.push(quote); //put quote in array
        });
        callback(data) // here
        console.log("quotes: ", quotes);  
    });
}

然而，这个定义loadData充其量是次优的。它应该利用jQuery 的thenable返回$.getJson，使代码更清晰。

function loadData(symbol) {
    return $.getJSON("http://localhost:8080/springboot-crud-rest/api/v1/quotes-between?symbol=IBM&startDate=2020-01-01&endDate=2020-09-30")
        .then(function (data) {
            const quotes = data.map(function (item) {
                return {
                    date: item.id.date.substring(0, 10),
                    ...item
                };
            });
            console.log("quotes: ", quotes);
            return quotes;
        });
}

消费为

loadData('something').then(function (data) {
    console.log("data: ", data);
});

推荐阅读