Avoiding Eval in javascript call to Pannellum

Question

I have a website in which I use javascript and pannellum API to load multiple 360 panoramic views.

Occasionally the browser crashes, particularly when on my iPhone 6 in VR mode when a total of six pannellum instances are required in different DIVs.

As best I can tell, the browser crashes on the call to pannellum which I am doing from inside an eval function as the data I pass to pannellum is contained in a variable.

Here's the call, plus the subsequent line that lets us know that the panorama is loaded.

eval("RightPanoInt=pannellum.viewer('RightPanoIntermediary', " + PanoDataIntermediary +");");
RightPanoInt.on("load", function() { LoadedRightPanoIntermediary(); });

Where

RightPanoInt is a variable I can use to check if the panorama is loaded

RightPanoIntermediary is the id of the DIV the panorama is to be loaded into.

and

PanoDataIntermediary is a variable containing the data / parameters need by the pannellum API.

For example

{"autoLoad": true,"pitch": 0,"yaw": 73,"vaov": 180,"haov": 360,"vOffset": 0,"maxPitch": 90,"minPitch": -90,"maxYaw": 180,"minYaw": -180,"maxHfov": 100,"hfov": 100,"minHfov": 10,"showFullscreenCtrl": false,"orientationOnByDefault": false,"showControls": false,"panorama": "002.jpg","preview":"BackgroundPaleGreen.jpg"}

The data will be different the next time the call is made, so the parameters must be in the PanoDataIntermediary variable.

What alternative method to the eval function can I use to make the same call?

Answer 1

Have you tried this (without eval)?

var RightPanoInt = pannellum.viewer('RightPanoIntermediary', PanoDataIntermediary);

According to your question, PanoDataIntermediary is a variable holding data. The only reason you'd need eval is if PanoDataIntermediary merely held the name of another variable that held the data.

Furthermore, the statement eval("RightPanoInt=pannellum.viewer('RightPanoIntermediary', " + PanoDataIntermediary +");"); treats your PanoDataIntermediary object as if it were a string but it is not a string and so cannot be concatenated as a string. This may be causing your browser crash. At the very least, it's throwing an exception.

A sample use of eval:

var myVariable = {a: 1, b:2, c:'test'};
var myVariableName = 'myVariable';
alert(eval(myVariableName).c);

Note: I'm not promoting the use of eval here. I'm just trying to offer some context.

Hope that helps.

Answer 2

Okay, the responses above have made me realise that instead of using a variable, I really should be using an object. For example...

var PanoDataIntermediary={"type":"equirectangular"}; // to initiate
PanoDataIntermediary.panorama="Church_HDR_x4_000.jpg"; // to add more parameters
PanoDataIntermediary.autoLoad = true;   
PanoDataIntermediary.pitch=0;
PanoDataIntermediary.yaw=73;
PanoDataIntermediary.hoav=360; // etc
RightPanoInt=pannellum.viewer('panorama', PanoDataIntermediary);

This will work without the need for using eval. It will take me awhile to rehash my existing code to see if it resolves the browser crash problem.

Thanks again.