WinJS - 防止两次快速按下按钮

时间:2014-10-07 12:33:51

标签: windows-8 windows-store-apps winjs double-click

我们在WinJS中的应用程序中有一种情况,我们从磁盘上的文件中读取序列化数据,并根据页面访问文件的不同部分。

我们遇到的问题是,当用户双击控件,按钮,列表视图等时,系统会尝试两次读取文件并偶尔爆炸。

在WinJS中是否有推荐的路线来防止或处理双重控制?除了在按下时手动禁用和重新启用所有按钮之类的东西?

我们已经查看了一些选项,包括重写addEventListener,但没有一个是完美的,我们非常感谢这方面的任何建议。

附加:虽然在这个示例中问题是正在读取文件,但我们还有其他应用程序,在列表上执行快速双击将尝试导航到页面两次(并将其添加到nav.history两次),所以看起来好像就像有很多地方和症状可以发生这种事情。

1 个答案:

答案 0 :(得分:0)

最好的方法是在处理时禁用按钮,并在完成后重新启用它们。如果事情花费的时间超过预期,这将为用户提供适当的反馈。

您可以通过数据绑定禁用它们,而不是手动设置它们。

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
    });
}

- 罗布