maps load infinitely after restriction of user ability to pan the map

Question

I am trying to restrict user's ability to pan map out of a defined boundign box.

I have set two vars "initExtent" and "validExtent" (valid bounding box) for the map and on extent change I check current extent.

but map loads infinitely after extent is changed:

var initExtent = esri.geometry.Extent({
        "xmax":  -8550513.84 ,
        "xmin": -10751900.25,
        "ymax": 7187679.36,
        "ymin": 5720088.41,
        "spatialReference": {
            "wkid": 102100
        }
    });

    var validExtent = esri.geometry.Extent({
        "xmax":  -8350513.84 ,
        "xmin": -10951900.25,
        "ymax": 7387679.36,
        "ymin": 5520088.41,
        "spatialReference": {
            "wkid": 102100
        }
    });

    map = new Map( "map" , {    
        extent: initExtent,
        zoom : 6,
        logo: false
    });

     on(map, 'extent-change', function(evt) {
            if ( !initExtent.contains(evt.extent) ) {
                console.log('Outside bounds!');
            } else {
                console.log('Updated extent');
                validExtent = evt.extent;
            }
        });


    on(map, 'pan-end', function(evt) {
            if ( !initExtent.contains(evt.extent) ) {
                map.setExtent(validExtent);
            }
        });

How can I fix this issue?

Answer 1

The initial value you are setting validExtent to isn't actually valid in that it's not contained within your initExtent. I suspect that what might be happening is that the on pan-end is firing before the validExtent variable is set to something valid and this is causing it to infinitely loop trying to set an invalid extent, detecting its invalid and so setting it again, over and over. Try setting the values of validExtent to be contained within the values of initExtent.