WFS not overlayed in map in openlayers3

Question

I am requesting wfs from geoserver using openlayers3. The wfs feature is loaded successfully but I cannot add it to the map. My code looks as:

var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults().extend(addControls()),
    layers: [
        sattelite, osm, bingLayer,
    ],
    view: view
});
createOverLayer('test', 1);

// Create the graticule component
var graticule = new ol.Graticule({
    //Style for lines
    strokeStyle: new ol.style.Stroke({
        color: 'rgba(0, 0, 0, 0.4)',
        width: 2
    })
});
graticule.setMap(map);

var sourceVector;
function createOverLayer(layerName, id) {
    console.log("super first");
    sourceVector = new ol.source.Vector({
        loader: function(extent, resolution, projection) {
            var url = 'http://192.168.0.101:8082/geoserver/test/ows';
            $.ajax(url,{
                    type: 'GET',
                    data: {
                        service: 'WFS',
                        version: '1.1.0',
                        request: 'GetFeature',
                        typename: 'test_Output',
                        srsname: 'EPSG:3857',
                        outputFormat: 'text/javascript',
                        bbox: extent.join(',') + ',EPSG:3857'
                    },
                    dataType: 'jsonp',
                    jsonpCallback: 'callback:getJson',
                    jsonp: 'format_options',
                    async: false,
            });
        },
        strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
            maxZoom: 19
        })),
    });
    console.log("here");
    /**
     * JSONP WFS callback function.
     * @param {Object} response The response object.
     */
    window.getJson = function(response) {
        geoJSON = new ol.format.GeoJSON();
        console.log("response");
        sourceVector.addFeatures(geoJSON.readFeatures(response));
    };
    console.log("here2");
    var vector = new ol.layer.Vector({
        source: sourceVector,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            })
        })
    });
    console.log("here3");
    map.addLayer(vector);
    console.log('here4');
}

The console ouput follows as:
super first
here
here2
here3
here4
response
response
response
response
response
response
response
response
response
response
response
response
response

It looks like map.addLayer(vector) is executed before response from geoserver? Also I expected one response console but there are many of them.

What am I missing here?

Answer 1

It worked after I moved createOverLayer('test', 1); above map