Load WFS into Leaflet with BBOX "strategy"

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
<div id="titel">Load WFS into Leaflet with BBOX "strategy" <br />
    Total Features loaded: <span id="total"></span>

</div>
<div id="map"></div>

<!-- inspired by https://stackoverflow.com/questions/25187937/loading-geojson-layers-from-geoserver-to-leaflet-map-based-on-the-current-boundi
-->

CSS

html,body {
    width:100%;
    height:100%;
    margin: 0px;
    padding:0px;
}
#map {
    width:100%;
    height:85%;
    border: 1px solid #2352F3;
}
#titel
{
    padding:10px;
    width:100%;
    height:15%;
}
#total
{
    font-weight:bold;
    color: #2352F3;
}

JavaScript

/*var corner1 = L.latLng(40.712, -74.227),
corner2 = L.latLng(40.774, -74.125),
bounds = L.latLngBounds(corner1, corner2);
*/
var map = new L.Map('map', {
    center: new L.LatLng(68.7512,25.6189),
    zoom: 4,
    crs: L.CRS.EPSG4326,
});

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';

var osm = new L.TileLayer(osmUrl, {
    minZoom: 0,
    maxZoom: 19,
    attribution: osmAttrib
});
//map.addLayer(osm);

var parks = L.esri.featureLayer({
        url: "http://gtkdata.gtk.fi/arcgis/services/Tukes/TukesWMS/MapServer/WmsServer?request=GetLegendGraphic%26version=1.3.0%26format=image/png%26layer=varausilmoitukset_karenssissa",
        style: function () {
          return { color: "#70ca49", weight: 2 };
        }
      });
map.addLayer(parks);
/*
var wmsLayer = new L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
    layers: 'nasa:bluemarble'
}).addTo(map);*/

var start_at_zoom = 4;

var currentlayer; 

var defaultStyle = {color: '#03f',opacity: 0.5,fillOpacity: 0.2,fillcolor: '#f7f90e'};
var highlightStyle = {color: '#f7f90e',weight: 3,opacity: 1,fillOpacity: 0};

function onEachFeature(feature, layer) {
    // does this feature have a property named dz?
    if (feature.properties && feature.properties.dz) {
        layer.bindPopup(feature.properties.dz);
    }
    layer.on({
					//mouseover: highlightFeature,
					//mouseout: resetHighlight,
					click: clickfunction
				});
}

var featureLayer = new L.GeoJSON(
null, {
    onEachFeature: onEachFeature
}).addTo(map);
load_wfs();

function loadGeoJson(data) {
   // console.log(data);
    $("#total").html(data.features.length);
    featureLayer.clearLayers();

    featureLayer.addData(data);

}

map.on('moveend', load_wfs);

function load_wfs() {
    if (map.getZoom() > start_at_zoom) {
        var geoJsonUrl = 'http://map.kecoviewer.com/geoserver/wfs';
        var defaultParameters =...