设置超时禁用

Question

我有个问题。 我有此菜单，单击后会下拉菜单，如果没有任何反应，我希望它在5秒后返回。 我走了这么远。 但是有一个小故障，当我单击它后退时，它会在5秒钟后无提示地出现。 是否可以检查它是否仍然可见，然后返回，如果不可见，请保持冷静并继续进行下去？

这是代码：

$(document).ready(function () {
  $('#aktivs-share').click(function() {     
  $('#share').slideToggle('slow', function() {  });
  setTimeout(function() {
  $('#share').slideToggle('slow', function() {  });
}, 5000);
});
 $('#aktivs').click(function() {
  $('#valodas').slideToggle('slow', function() {  });
  setTimeout(function() {
  $('#valodas').slideToggle('slow', function() {  });     
 }, 5000); 
});
});

Answer 1

您需要跟踪菜单所处的状态，然后在菜单状态关闭的情况下使用clearTimeout（）清除超时。

（代码未经测试，但希望您能理解）

var shareOpen = false;
    var shareTimeoutHandle = undefined;
    $('#aktivs-share').click(function() {
        $('#share').slideToggle('slow', function() {  });

        // check the current state, if open already, close and reset
        if (shareOpen) clearTimeout(shareTimeoutHandle);
        else {
            shareTimeoutHandle = setTimeout(function() {
                $('#share').slideToggle('slow', function() {  });
            }, 5000);
        }
        // set the new state to be the opposite
        shareOpen = !shareOpen;
    });

Answer 2

记住setTimeout的返回值，它是可以通过clearTimeout取消它的句柄。

在你的情况，因为你想拥有超过一件事做到这一点，可能是最好的实际存储元件上的计时器手柄，通过data 。

您可能会考虑自己编写一个插件方法来执行此操作，以避免重复逻辑。 slideToggleAutoClose 。 :-)