nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Timeout Issues

TomLeMahieu

What I'm trying to do is zoom to the selected feature and then send the map to the printer. Then zoom to the buffer and again print the resulting map to the printer. Each of the following steps works by themselves. However, I'm having a problem figuring out how to sequence the statements and use timeouts to ensure that each step is completed before the next process starts? Here's my code:

//Zoom to Parcel

setTimeout(lang.hitch(this, function () {

this.zoomselected();

}), 3000);

setTimeout(lang.hitch(this, function () {

html.setStyle(this.PrintMessage, 'display', 'block');

}), 5000);

//Zoom to Buffer

setTimeout(lang.hitch(this, function () {

this.zoombuffer();

}), 3000);

setTimeout(lang.hitch(this, function () {

html.setStyle(this.PrintMessage, 'display', 'block');

this.sendToPrinter_SoilErosion(sTitle,sLayout,sFormat,sMessage);

}), 5000);

Find more posts tagged with

Accepted answers

All comments

ChrisSmith7

I wish I would have employed this a couple of years back - I ended-up creating a bunch of kludgy, asynch watches on variables and stuff for flow control. It works well, but sure is a strange way of doing things... Now that I'm a bit wiser, I think a refactoring is in order...

TomLeMahieu

Girish,

That was super helpful and I think I'm getting close. However, when I run zoombuffer first, it zooms to the buffer but when it tries to run the zoomselected function, it thinks that this.selValueShapeFeatures is undefined. When I reverse the order, then zoomselected zooms to the selected feature, but when it tries to run the zoombuffer, it thinks that this.graphicsLayerBuffer is undefined. What am I missing? Here's the simple code:

onTest: function () {

this.zoombuffer()

.then(this.zoomselected)

.then(this.zoombuffer);

zoomselected: function () {

if (this.selValueShapeFeatures) {

var features = this.selValueShapeFeatures;

if (features.length != 0) {

var graphics = features;

var gExt = graphicsUtils.graphicsExtent(graphics);

var selectedExt = gExt.expand(1.1);

return this.map.setExtent(gExt.expand(1.1));

} else {

return null;

}

zoombuffer: function () {

if (this.graphicsLayerBuffer) {

if (this.graphicsLayerBuffer.graphics.length > 0) {

var graphics = this.graphicsLayerBuffer.graphics;

var gExt = graphicsUtils.graphicsExtent(graphics);

var bufferExt = gExt.expand(1.1);

return this.map.setExtent(bufferExt);

}

} else {

return null;

}

Thanks.

Tom

GirishYadav

Hey Tom,

Yeah, initially its a bit tricky to understand deferred and promise but once you get your hands dirty its very simple and cool. Most of the ESRI javascript API functions already return deferred where ever necessary. So its even easier to use it for ESRI javascript API. Here is an example to chain ajax calls using dojo deferred and promise. Dojo Deferred - Chaining - JSFiddle .

Its a very simple functionality to print map in two different scales.

here is a crux of it:

function printMap(){
    var printTask = new PrintTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task");
    var printTemplate = new PrintTemplate();
    printTemplate.layout = "MAP_ONLY"; //"A4 Portrait";
    printTemplate.preserveScale = false; 
    var params = new PrintParameters();
    params.map = this.map;
    params.template = printTemplate;
    dom.byId("printButtonNode").innerHTML = "Printing...";
    return printTask.execute(params);
  };
    
function zoomToSelectedFeatures(){    
    var selectedExt = map.extent;
    return map.setExtent(selectedExt);
};
    
function zoomToBufferedFeatures(){    
    var bufferedExt = map.extent.expand(1.5);
    return map.setExtent(bufferedExt);
};

function addResults(results){
    var resultContainer = dom.byId("results");
    domConstruct.place('<div><a href="' + results.url + '" target="_blank">Map </a></div>', resultContainer); 
    dom.byId("printButtonNode").innerHTML = "Print";
};

 on(dom.byId("printButtonNode"), "click", function(){  
    dom.byId("results").innerHTML = "";
    zoomToSelectedFeatures()
     .then(printMap)
     .then(addResults)
     .then(zoomToBufferedFeatures)
     .then(printMap)
     .then(addResults);     
   });
});

Thanks

-Girish

TomLeMahieu

Girish and Chris,

I reviewed the samples using dojo deferred, but I'm still not sure how to make this work. I'm not very experienced in dojo, so I'm looking for a simple example using the ArcGIS JavaScript api.

I'm trying to execute the following two functions which work fine if I stop each of them using alert.

this.zoomselected();
this.sendToPrinter_SoilErosion(sTitle,sLayout,sFormat);

I tried all kinds of deferred statements like the following, but nothing seems to work.

var def = new Deferred();
def = this.zoomselected();
def.then(function() {
this.sendToPrinter_SoilErosion(sTitle,sLayout,sFormat);
});

Does anyone have any similar examples I can look at?

Thanks.

Tom

TomLeMahieu

Girish,

Thanks for your quick reply. That makes a lot of sense. I'll let you know how it goes.

Tom

ChrisSmith7

Dojo makes it easy:

Deferred and Promise chaining tests - JSFiddle

Here's another example for chaining using Mootools:

Chaining Javascript functions with callbacks - JSFiddle

And jQuery:

jsdeferred chain - JSFiddle

http://stackoverflow.com/questions/5230333/how-to-avoid-callback-chains

Note, the jsfiddles aren't mine! Additionally, regarding jQuery, here's some info on queue vs deferred objects:

http://stackoverflow.com/questions/8119208/how-to-use-queue-or-deferred-in-what-condition-what-are-their-designing-pur

GirishYadav

Hey Tom,

I would suggest its better to use dojo Deffered to chain these functions rather than using timeouts.

Getting Started with Deferreds - Archived Tutorial - Dojo Toolkit

- Girish

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.