Leaflet.js: detecting when map finishes zooming

You can use the map.zoomend event, described in the API here

map.on('zoomend', function() {
    drawGrid();
});

Once the map finishes the zooming animation, it will then call the drawGrid function.

This is best way to managed leflet Zoom control clicked

    /*Zoom Control Click Managed*/
    var bZoomControlClick = false;
    mymap.on('zoomend',function(e){
        var currZoom = mymap.getZoom();
        if(bZoomControlClick){
            console.log("Clicked "+currZoom);
        }
        bZoomControlClick = false;
    });     
    var element = document.querySelector('a.leaflet-control-zoom-in');
    L.DomEvent.addListener(element, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });
    var element1 = document.querySelector('a.leaflet-control-zoom-out');
    L.DomEvent.addListener(element1, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });

In newer version of Leaflet, "zoomed" is no longer an event. There are now "zoomstart" and "zoomend" events:

map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });