wms - Leaflet Maps Sync problem

I am trying to sync 3 maps (BaseMapd, overlayMap, tiledMap) side by side however these maps don't sync together immediately but it works sometimes during different multiple browsers (Chrome, Firefox & IE) of refreshes.

Most of the problem is from Chrome. I realize that cache is one of the issues that I have faced. When I uploaded the files into a webserver, it loads perfectly. Soon after, it has sync problem once again.

requirejs.config({
    'baseUrl': 'lib/',
    'paths': {

        'leaflet.wms': 'leaflet.wms' ,//.js'
        'L.Map.Sync': 'L.Map.Sync' //.js'
    }
});

define(['leaflet', 'leaflet.wms','L.Map.Sync'],
    function(L,wms,sync) {

var BaseMapd   = basecreateMap('base-map');
var overlayMap = createMap('overlay-map', true,'2007');

var tiledMap   = createMap('tiled-map', true,'1988');

BaseMapd.sync(overlayMap);
BaseMapd.sync(tiledMap);
overlayMap.sync(BaseMapd);
overlayMap.sync(tiledMap);
tiledMap.sync(BaseMapd);
tiledMap.sync(overlayMap);

}

Then I use another method from MapBox (below), and these 3 maps sync perfectly. When I interact with 'BaseMapd', the non-active maps ('overlayMap' and 'tiledMap') are not auto-re-rendered.

Afterwards, I click on the 'overlayMap' to interact and move around. However, the non-active maps ('BaseMapd' and 'tiledMap') are not auto-re-rendered. And it just goes on for the same thing with 'tiledMap'.

function(L,wms,sync) {

var BaseMapd   = basecreateMap('base-map');
var overlayMap = createMap('overlay-map', true,'2007');
var tiledMap   = createMap('tiled-map', true,'1988');

// when either map finishes moving, trigger an update on the other one.

BaseMapd.on('moveend', follow).on('zoomend', follow);
overlayMap.on('moveend', follow).on('zoomend', follow);
tiledMap.on('moveend', follow).on('zoomend', follow);

var quiet = false;
function follow(e) {
    if (quiet) return;
    quiet = true;
    if (e.target === BaseMapd) sync(overlayMap, e);
    if (e.target === BaseMapd) sync(tiledMap, e);

    if (e.target === overlayMap) sync(BaseMapd, e);
    if (e.target === overlayMap) sync(tiledMap, e);
    if (e.target === tiledMap) sync(BaseMapd, e);
    if (e.target === tiledMap) sync(overlayMap, e);
    quiet = false;
}

// sync simply steals the settings from the moved map (e.target)
// and applies them to the other map.
function sync(map, e) {


    map.setView(e.target.getCenter(), e.target.getZoom(), {
        animate: false,
        reset: true
    });

}

I would like to know how to resolve these 3 maps to sync immediately when the user loads on the browser.