I have two buttons on my code which will add and delete primitives when clicked. On the other hand, I have an event listener for onTick method which will get as an input the active primitive and a variable indicating its index, and is supposed to used that primitive with that particular index for the event.
When I did debugging I saw that although the input argument was updated but the parameter used by the event listener were not updated. And I got the error that the object is destroyed.
Do you know how I can update these arguments or stop the previously scheduled events?
onTick is a Cesium Event with an addEventListener function that returns a hook to unsubscribe. You simply call the return value, later, when you want to end your subscription to that event.
var unsubscribe = viewer.clock.onTick.addEventListener(myCallback);
// ... later ...
// Stop the onTick callback.
unsubscribe();
Related
What is the difference between
onChange={({ target: { value } }) => setInsertedTitle(value)}
and
onChange={setInsertedTitle}
When should one or another be used?
Using onChange={({ target: { value } }) => setInsertedTitle(value)} you are passing the current target value as a parameter.
It is because onChange generates an Event, and you access the value by event.target.value ...
event: {
target: {
value: "string"
}
}
On the other hand, when you use the function like in onChange={setInsertedTitle}, it receives the event.
You can see it here: https://codesandbox.io/s/compassionate-fast-krrib?file=/src/App.js
Look at what each does and spot the differences:
onChange={({ target: { value } }) => setInsertedTitle(value)}
Creates an arrow function (let's call it func)
Whenever onChange/func gets called, e.g. func(event):
It uses destructuring to set value to the value of event.target.value
It calls setInsertedTitle with value (therefore event.target.value)
In the other case:
onChange={setInsertedTitle}
When onChange gets called with event, we directly call setInsertedTitle with event.
Therefore the main difference is whether it passes event.target.value or just event.
The first one passes a function to onChange that, when called, will get the value of the target element of the event (this is probably an input element, so target will be that input element) and pass that value to setInsertedTitle. So when the event occurs, setInsertedTitle gets called with a string (the value of the input).
The second one will directly pass setInsertedTitle to onChange. When the event occurs, setInsertedTitle will get called with an event object rather than the value of the input.
For the avoidance of doubt: The first one is correct, the second one is incorrect. (Even if you wanted to have an event object in your state data — which you almost certainly don't — you can't just keep the one you're passed; you're not allowed to keep them as they get reused [I think that's going to change at some point].)
<template is="dom-repeat" items="{{myItems}}">
<div on-click="{{ComputedBindingFunction(item)}}">Foo</div>
</template>
This yields an error saying:
listener method {{ComputedBindingFunction(item)}} not defined
Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs?
Note that ComputedBindingFunction returns a function.
The example shown in the documentation you link to isn't for calling methods or firing events, it's for using computed bindings.
i.e.
<div>{{ComputedBindingFunction(item)}}</div>
If you're your trying to trigger an event, remove the braces:
<div on-click="ComputedBindingFunction"></div>
...
Access item from the triggered event
ComputedBindingFunction: function(event){
_ComputedBindingFunction(event.model.item)
}
Firstly, Attributes for event listeners (e.g., on-click, on-tap, etc) don't allow computed bindings as an argument, only a string.
Secondly, even if they did, which would be super cool in the future, your example still wouldn't work because you are returning a function from the computed binding and not a string.
Your computedFunction should instead be returning the name of the function you want to call which is defined using the arguments supplied when the event is fired.
Example:
html polymer event handler attribute
<div on-click="{{computeFunction(a, b}}">Button</div>
computeFunction makes a new function "add" and returns the name of this function as a string.
computeFunction: function(a, b) {
functionName = "add";
this[functionName] = function() {
// Does whatever you want with arguments, a, b
// Like maybe adding them together.
return a + b
}
return functionName;
}
add: function(a, b) {
return a + b;
}
This way the function called "add" which is called when the on-click event occurs would always be using the new variables "a" and "b" assigned to it.
Until this is available, which it might be never, You can store parameters in an attribute on the element which fires the event.
<div on-click="someFunction" someFunction="{{item}}">Button</div>
someFunction: function(e) {
// Current target is the node that fired the event,
// It has our stored parameter "{{item}}" as a value of "someFunction"
var item = e.currentTarget.getAttribute('someFunction');
// Do something with item
console.log(item);
}
As you can see I stored the item in an attribute with the name of the function called by the on-click event.
This way it's easy to tell what arguments are going to be passed to the function just from looking at the html, and works for multiple event handlers on the same element.
I have difficulty understanding the following codes even with the comments
// Store the initial cell value so we can reset to it if need be
var oldCellValue;
var dereg = scope.$watch('ngModel', function() {
oldCellValue = ngModel.$modelValue;
dereg(); // only run this watch once, we don't want to overwrite our stored value when the input changes
});
How many time does function dereg got called in this case? Is this a recursion?
The code you've shown is in a nutshell
storing reference to (just added) $watch() returned value (see below $rootScope.$watch returned value)
once first time is that $watch() called, it calls that referenced function - which leads to ubinding of that $watch()
Read this nice article
Unbinding $watch() Listeners In AngularJS
a small extract from a summary:
As you can see, we're storing the function reference returned by the $watch() statement; then, once the $watch() fires a few times, we invoke that stored method, unbinding the $watch() listener.
In that example, there is an if statement, which could help us to decide, when is the best time to remove that $watch() (e.g. after the first evaluation) ...
The more detailed defintion of the scope.$watch() could be found here:
$rootScope.Scope
And as we can see from this extract:
$watch(watchExpression, [listener], [objectEquality]);
...
Returns a deregistration function for this listener.
I need to call a function to check the value of a form input box after the keyDown event and all its corresponding callback handlers have finished and returned. I know I need this because if I place a timer in the callback handler which checks the value of the input box after 200 ms or so the value is as expected, but if I check the value at the end of the callback handler itself, its empty.
// case 1
$('textbox').keyDown(function(){
...
console.log($(this).val()); // empty, not as expected
});
// case 2
$('textbox').keyDown(function(){
...
var $textbox = $(this);
var timer = setTimeout(function(){
console.log($textbox.val()); // works as expected
clearTimeout(timer);
}, 200);
});
So, is there a clean way in javascript/jQuery to call a function after an event has completely finished?
(And yes, I'm aware of the onChange event, but I've tried it and it doesn't work for this scenario. I'm trying to detect user-defined key combinations and this is a corner case. And in this corner case, the keyPress and keyUp events don't fire either, just keyDown.)
Use keyUp, instead. keyDown is fired before input; keyUp is fired after.
Hello Friend Try this you will get it
$('textbox').keyDown(function(e){
...
console.log(String.fromCharCode(e.which));
});
This show the key you have pressed.
Hope this solves your problem
I have an input field, which has two event handlers bound to it.
Validate & AutoSave
Obviously I want to validate before I save. If validation fails, the "invalid" class is added to the input and autosave will check for that class before it proceeds.
This works well enough, but is there a way to guarantee Validate runs before Autosave in all cases?
If you use JQuery to bind your events, it guarantees that handlers are fired in the same order that they were bound. Otherwise the order is officially undefined.
If you cannot use JQuery or a similar framework you can easily simulate this by using your own custom even binding, where your generic handler is a function which keeps an array of functions and calls them in order.
Normally you'd have the Save event handler call Validate() which will return true if everything is fine and ready to be saved.
function onSaved() {
if (!validate()) {
// set class
return;
}
// do the save
}
Why not attach just one handler -- Validate -- and call AutoSave from inside it?
For an answer to your question that isn't also a question, see this post or this one or this one.
Already answered - but just to add this piece of knowledge, the order of event handlers can not be relied upon. It may in any given implementation be predictable, but this can change from one (Javascript) implementation to the next and/or over time. The only thing certain is that they all will be executed - but not in what order.
Note that the situation is similar when there is an event handler for a DOM object and another one for the same event for a child or parent - which of those is executed first is not always clear as well. See http://www.quirksmode.org/js/events_order.html