So in the site scratch.mit.edu, there is a way so that once a block of code is finished, it can broadcast a statement. Its a really useful tool and I was wondering if there is something like/similar to that in coding!
Does anyone know if there is or not?
Look into creating and triggering custom events.
Example:
//create a new custom Event object called build
const event = new Event('build');
// create an event listener (attached to the global window object)
//This is like a Scratch receiver hat block. The first parameter, 'build', is the
//name of the broadcast. The second parameter, the function, is your code
//that reacts to the broadcast.
window.addEventListener('build', function (e) { /* your code here */ });
//This line of code "sends" the broadcast.
window.dispatchEvent(event);
Have fun learning JavaScript!
Related
I have Problem with onTick() method, I have two buttons for two different situations, in each one I will load separate dataSource, just like the czml.html example on Sandcastle. I have two different definition for onTick() method for each button seperately, to do some specific things when we reach at a specific time. In the reset method I am removing entities and dataSources of my viewer, but I cannot remove onTick method implementation.
When I am running my code, the default button is doing perfectly fine, but when I press other button, all those conditions that I mentioned for the first button is also happening at the same time, and it will not let my second onTick method to perform its job correctly. Do you know how I can deactivate the first onTick method?
Take a look at the addEventListener documentation, you'll find two different ways to undo the addition of an event listener: One is to call the matching removeEventListener, and the other is to save the return value from addEventListener and invoke it later.
Here's some code showing both ways. Use whichever option makes more sense for your code, but don't use both at once.
function onTickCallback(clock) {
// ... do stuff with every tick ...
}
var unsubscribeTicks = viewer.clock.onTick.addEventListener(onTickCallback);
function unsubscribeOption1() {
// One option is to call removeEventListener. In this case, you
// don't need to save "var unsubscribeTicks" at all, but you do
// need a reference to the original onTickCallback.
viewer.clock.onTick.removeEventListener(onTickCallback);
}
function unsubscribeOption2() {
// The other option is to save the return value of addEventListener,
// and later invoke it. This could be a cleaner option if the
// onTickCallback was declared anonymously inline.
unsubscribeTicks();
}
I'm developing a canvas game that happens to have several scenes. Each scene might end up being a static final frame after having finished. The circumstances are that the ticker and the listener for the "tick" event are still running and keep on rendering full speed - which is asking for cpu usage.
I have tried to remove the listeners at the end of scene and add them back wenn the user interacts and starts the next scene.
I wonder what would be the "createJS" way of doing this.
I see some other options but am a bit lost how to proceed:
Caching the "whole" last frame. Will it make the ticker do "absolutely nothing" performance-wise?
Pause the ticker and check for the paused attribute in the handleTick method: Seems to not take the CPU usage completely down.
Can somebody recommend a way?
On a side note: I need my real "this" object inside the tick function that is bound to the ticker. How can I achieve this? Right now I use this code:
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
// Actions carried out each tick (aka frame)
if (!event.paused) {
// Actions carried out when the Ticker is not paused.
}
}
Inside handleTick "this" is not my object that added the listener.
A simple createjs.Ticker.removeEventListener("tick", handleTick); should do just fine as long as handleTick exists in your current scope. See this example.
There are a couple ways to access the scope of the object that assigned the tick listener. For example, you could simply assign this to a local variable like so:
var _this = this;
function handleTick(){
//"_this" now refers to the scope that defined handleTick.
}
Or you can use a delegate. In this example I'm using jQuery's proxy function to scope handleTick to this.
var handleTick = $.proxy(function(){
//"this" refers to the scope that defined handleTick.
}, this);
createjs.Ticker.addEventListener("tick", tickHandler);
The architecture is based on the use of the following frameworks: Flex, Cairngorm and Parsley.
I use a dispatcher with an event "AdicionarItemVendaMercadoriaEvent" within a popuppanel: PopupPanel.
I capture the event with [MessageHandler] within the FormPM.as injected into Form.mxml.
Within Form.mxml, I have a mx: TabNavigator and each tab is within one s: NavigatorContent.
It turns out that when there is more than one open tab mx: TabNavigator the dispatched event is captured in all Form of all tabs.
Normal operation was to capture the only event of the tab where the PopupPanel was dispatched, not all tabs.
Please, any suggestions for solving this problem?
I appreciate the help.
How about using straight forward function callbacks?
When you create your PopUpPanel, pass in a function callback that you want to be executed when the popup is closed. Rather than using an event, you'd simply call the function. i.e.
Inside FormPM:
public function showPopup():void
{
var popup:PopUpPanel = new PopUpPanel();
popup.onCompletion = handleResult;
PopUpManager.addPopUp(popup, ...);
}
private function handleResult(someData:*):void
{
// My popup has completed.. what do I want to do with the result.
}
You might want to consider the Spicelib 3.0 command framework and have a command to popup your panel and then add the error/success callbacks to that: http://www.spicefactory.org/parsley/docs/3.0/manual/?page=commands§ion=intro
I'm creating a GUI, but only if things go ok, so can i
addEventListener(Event.Complete, go) to something and in the go function create my GUI (grafical elements such as labels, lists, squares)?
Is it ok to do that?
Technically it's fine. crooksy88 gives a good example of supplying a default value for the event parameter to make the function more versatile.
However, for the sake of semantics, clarity, and maintenance I would usually prefer to separate things more. So mine might be set up more like this:
protected function onLoadComplete(e:Event):void {
initAppSettings();
createUI();
startApp();
}
It makes it much easier to understand the flow of the app and what each part does just by reading the function names. When I come back to this later, I'll know that my UI is created in the function named createUI and not have to figure out that it gets created in an event handler with a cryptic name like go or handleEvent.
Also, if I want to change the flow of my app, say to pop up a dialog once the load is complete before the UI is created, I just have to move around some function calls, instead of moving around large chunks of code.
Yes that is perfectly fine. The go function isn't part of the event listener.
function go(e:Event):void {
// do something
}
The sample above requires the event parameter from the listener (e:Event).
But you can modify the function so that the parameter is optional so you can call the go function any time you want
function go(e:Event = null):void {
// do something
}
The example above will be triggered by the listener and also by typing
go();
Hopefully you will excuse me if this is a simple/silly question. I started learning action script about 6 days ago and already working on a small project :D
Anyways, there is a property that changes occasionally to reflect the name of a level in a game (object._I._M.text). It could take a minute to change, or a max of two minutes, depending on how fast all players are able to finish the level.
I want to be able to listen for the change in this property to fire off another function. I have found very few answers to this online, and the examples I have found were very incomplete and poorly written. Does anyone know how I could do this?
I have tried ...
theobject._I._M.addEventListener(Event.CHANGE, myfunction);
To no success. Thanks for any help or advice, I am going to get back to learning while I await responses :D
I would probably use getters/setters, or just declare one method to change the text of that textfield so that you can dispatch an event every time.
function changeLevel(text:String):void {
levelTf.text=text;
dispatchEvent(new Event("levelChange"));
}
I'll agree the Adobe docs are a bit "heavy" to look through. A good resource is the kirupa forum.
As for the TextField change event listener, your original code is very close. Here is a good example of how to add an event listener. The basics are:
public class Main extends Sprite {
// Store a reference to the text field
// (you're already doing this somewhere, so adapt as you see fit)
private var inputfield:TextField = new TextField();
public function Main() {
// Make sure the field is added to an on-screen Sprite
addChild(inputfield);
// Add the event listener.
// I recommend adding the 'false, 0, true' params. There are lengthy
// discussions around about this.
inputfield.addEventListener(Event.CHANGE, changeListener, false, 0, true);
}
// This function gets called every time the event is fired.
private function changeListener (e:Event):void {
trace("event");
}
}
Hopefully that gets you started in the right direction.