Hi community,
I need to understand what I'm conceptually doing wrong or what I'm confusing here.
This experiment is to test the chaining of events, so basically Event1 shall trigger Event2, which is split, so Event2 shall trigger Event3 and then finish. Sounds a bit weird when describing it that way, so here's the basic code:
index.html:
<html> <head> <meta charset="utf-8"> <script src="./lib/CSInterface.js"></script> <script src="./lib/jquery.js"></script> <script> $(document).ready(function() { $("#EventChain").on("click", function(e){ e.preventDefault(); var cs = new CSInterface(); var message = "Event Listeners created.\nLet's go!\n\n"; cs.addEventListener("Test.Event1", function(evt) { message += evt.data + "\n\nEvent 2 to occur...\n\n"; $("#textarea").text(message); // console.log(evt.data); cs.evalScript('$._ext_ed.e_chain2("This is Event 2.")'); }); cs.addEventListener("Test.Event2", function(evt) { message += evt.data + "\n\nEvent 3 to occur...\n\n"; $("#textarea").text(message); // console.log(evt.data); cs.evalScript('$._ext_ed.e_chain3("This is Event 3.")'); }); cs.addEventListener("Test.Event3", function(evt) { message += evt.data + "\n\n"; $("#textarea").text(message); // console.log(evt.data); cs.removeEventListener("Test.Event1"); cs.removeEventListener("Test.Event2"); cs.removeEventListener("Test.Event3"); }); $("#textarea").text(message); cs.evalScript('$._ext_ed.e_chain1("This is Event 1.")'); }); }); </script></head><body><header></header><section> <button id="EventChain">EventChain</button><br/> <textarea id="textarea" placeholder="Click the EventChain button!"></textarea></section><footer></footer></body></html>
JSX:
try { var xLib = new ExternalObject("lib:\PlugPlugExternalObject");
} catch (e) { alert(e);
}
$._ext_ed={
dispatchEventCEP : function (_type, _payload) { if (xLib) { var eventObj = new CSXSEvent(); eventObj.type = _type; eventObj.data = _payload; eventObj.dispatch(); } else { alert ("PlugPlugExternalObject not loaded.", true); } }, e_chain1 : function (msg) { alert ("Message \""+msg+"\" received.", false) var eventType = "Test.Event1"; $._ext_ed.dispatchEventCEP(eventType, msg) }, e_chain2 : function (msg) { var eventType = "Test.Event2"; $._ext_ed.dispatchEventCEP(eventType, msg + "part one"); $.sleep(5000); $._ext_ed.dispatchEventCEP(eventType, msg + "part two"); }, e_chain3 : function (msg) { var eventType = "Test.Event3"; $._ext_ed.dispatchEventCEP(eventType, msg) }
}
expected test result:
Event Listeners created.
Let's go!
This is Event 1.
Event 2 to occur...
This is Event 2.part one
Event 3 to occur...
This is Event 3.
This is Event 2.part two
Event 3 to occur...
This is Event 3.
actual test result:
Event Listeners created.
Let's go!
This is Event 1.
Event 2 to occur...
This is Event 2.part one
Event 3 to occur...
This is Event 2.part two
Event 3 to occur...
This is Event 3.
This is Event 3.
What's going on? Why is Event 3 not completely dispatched when Event 2 part one is obviously finished?
It gets even worse when I click the button once more:
Event Listeners created.
Let's go!
This is Event 1.
Event 2 to occur...
This is Event 2.part one
Event 3 to occur...
This is Event 2.part two
Event 3 to occur...
This is Event 2.part one
Event 3 to occur...
This is Event 2.part two
Event 3 to occur...
This is Event 3.
This is Event 3.
This is Event 3.
This is Event 3.
This is Event 3.
This is Event 3.
This is Event 3.
This is Event 3.
I'll try to find some useful reading on this myself but I'd appreciate useful comments!
Cheers,
e.d.