0

我的网页有工具栏（顶部和底部），当用户将鼠标移动到顶部/底部边缘附近时，它就会可见。当它移开时，工具栏变得不可见。我想让工具栏立即可见，但延迟 3 秒后隐藏。

该页面绑定到 KO 视图模型，该视图模型捕获鼠标移动和显示或隐藏。工具栏。在 KnockoutJS 中，节流阀/速率限制会使延迟成为可能，但它可以双向工作。而我只想在鼠标离开时延迟。

是否可以通过 KnockoutJS 来实现这一点，例如有条件地设置油门/速率限制延迟？

4

1 回答 1

1

使用在此淘汰赛示例中找到的淘汰赛事件绑定：

http://knockoutjs.com/documentation/event-binding.html

然后做这样的事情：查看：

<button data-bind="event: { mouseover: makeToolbarVisible, mouseout: disableToolbar }">Mouse over me</button>
<button data-bind="visible: toolbarVisibility">Details</button>

视图模型：

    var toolbarVisibility = ko.observable(false);
    var triggerComputed = ko.observable(false);

    function makeToolbarVisible() {
        toolbarVisibility(true);
    };

    function disableToolbar() {
        triggerComputed(true);
    };

    var comp = ko.computed(function () {
        triggerComputed(false);
        toolbarVisibility(false);
        console.log("Disabled after 3 sec");
        return triggerComputed();
    }).extend({ throttle: 3000 });

可能不是最优雅的解决方案，但它可以完成工作。

于 2015-03-19T08:28:42.820 回答