Why setTimeout not able to access outside specific variable?

Question

I have found a strange behaviour of setTimeout. I don't know why it is able to select some variable values properly from those declared before setTimeout but not a specific one.

this.RegisterForUpdateContents = function (intervalTime, FormControlGuid)
{        
    var layoutInfo = sessionStorage.getItem('LayoutInfo');            

    var panelName = "Panel_" + FormControlGuid;

    var timeOut = parseInt(intervalTime) * 1000;
    var self = this;

    var timeoutHandle = setTimeout(function ()
    {            
        var dashboardViewer = "dashboardViewer_" + FormControlGuid;
        console.log('Just sending callback for Update and LayoutInfo is  : ' + layoutInfo);

        var CallbackInfo = { 'selectedClientId': ClientId_HeaderSection.GetValue(), 'PanelName': panelName, 'Width': dockPanel.width, 'Height': dockPanel.height, 'dashboardViewer': dashboardViewer, 'UpdateTime': intervalTime, 'Layout': layoutInfo };  

    }, timeOut);


    sessionStorage.setItem((panelName + "|" + "Timeout"), timeoutHandle);
}

I can access panelName contents but I don't know what is happening with layoutInfo. layoutInfo always empty as "". But If I access inside setTimeout from sessionStorage.getItem('LayoutInfo'), it is accessible.

Does anybody know why?

Edit

$.each(keys, function (index, singlePanel)
{
  sessionStorage.setItem(singlePanel, JSON.stringify(panelRenderingInfo));
  if (UpdateTime)
      selfInstance.RegisterForUpdateContents(UpdateTime, FormControlGuid);
});

var LayoutVSClient = { 'CurrentLayout':    selectedLayout,'selectedClientValue': ClientId_HeaderSection.GetValue() };
sessionStorage.setItem('LayoutInfo', JSON.stringify(LayoutVSClient));

Answer 1

I just recreated your code to as close as possible in a JSFiddle.

testTimeout = function (intervalTime, formControlGuid)
{        
    var layoutInfo = sessionStorage.getItem('LayoutInfo');            

    var panelName = "Panel_" + formControlGuid;

    var timeOut = parseInt(intervalTime) * 1000;
    var self = this;

    var timeoutHandle = setTimeout(function ()
    {            
        var dashboardViewer = "dashboardViewer_" + formControlGuid;
        console.log('Just sending callback for Update and LayoutInfo is  : ' + layoutInfo);

        var CallbackInfo = { 'selectedClientId': 'client-header-section-value', 'PanelName': panelName, 'Width': dockPanel.width, 'Height': dockPanel.height, 'dashboardViewer': dashboardViewer, 'UpdateTime': intervalTime, 'Layout': layoutInfo };  

    }, timeOut);


    sessionStorage.setItem((panelName + "|" + "Timeout"), timeoutHandle);
}

var dockPanel = { width:50, height:60 };
sessionStorage.setItem('LayoutInfo', 'layoutInfoContent');
testTimeout(2, '325609e6-51bd-4c69-9613-be0b36b7e2a1');

Using this example, I was unable to replicate the problem you described. Do you have a line of code present to set the sessionStorage? Example:

sessionStorage.setItem('LayoutInfo', 'layoutInfoContent');

===EDIT===

@Uston, are you able to change your newly edited code above to the following:

var LayoutVSClient = { 'CurrentLayout':    selectedLayout,'selectedClientValue': ClientId_HeaderSection.GetValue() };
sessionStorage.setItem('LayoutInfo', JSON.stringify(LayoutVSClient));

$.each(keys, function (index, singlePanel)
{
  sessionStorage.setItem(singlePanel, JSON.stringify(panelRenderingInfo));
  if (UpdateTime)
      selfInstance.RegisterForUpdateContents(UpdateTime, FormControlGuid);
});