WinJS - Prevent Two Fast Button Clicks
We have a situation in an application in WinJS where our serialized data is read from a file on disk and different sections of the file are available depending on the page.
The problem is that when the user doubles on a control, button, listview, etc., the system will try to read the file twice and sporadically explode.
Is there a recommended route in WinJS for preventing or handling double-clicking on controls? other than something like manually disabling and re-enabling all buttons when pressed?
We've looked at some options, including overriding addEventListener, but none are perfect, any suggestions in this area would be greatly appreciated.
Additional Notes: Although this example is a file reading problem, we have other applications where doing quick double-clicks on lists will try to navigate to the page twice (and add it twice to the navigation version), so it seems like there are several places and the symptoms in which such a thing can happen.
source to share
The best way is to disable buttons during processing and reuse when done. This will provide proper user feedback if the situation takes longer than expected.
You can disable them using data binding rather than manually setting them.
Html
<button id="button1" data-win-bind="disabled: disabled">Click</button>
<button id="button2" data-win-bind="disabled: disabled">Click</button>
<button id="button3" data-win-bind="disabled: disabled">Click</button>
<button id="button4" data-win-bind="disabled: disabled">Click</button>
JavaScript
var bindingSource;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
var disabledContext = { disabled: false }
var btn = document.getElementById("button1");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
btn = document.getElementById("button2");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
btn = document.getElementById("button3");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
btn = document.getElementById("button4");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
bindingSource = WinJS.Binding.as(disabledContext);
}
};
function buttonClickHandler(eventInfo) {
bindingSource.disabled = true
WinJS.Promise.timeout(5000).then(function (c) {
bindingSource.disabled = false
});
}
- Rob
source to share