Question

我一直在尝试添加250毫秒的延迟，以便在第一次点击事件的250毫秒内多次点击该元素时，该功能不会运行两次。帮助！

$(function () {
    $(".layout a").click(function () {
        var rel = $(this).attr('rel'); 
        $.cookie("Layout", $(this).attr('name'), { expires: 365, path: '/media', secure: true });
        $('.content, .searchresults').fadeOut(250, function () {     
           $("link:first").attr("href", rel); window.scrollTo(0, 0); }).delay(150).fadeIn(225); 
        return false;
    });
});

Answer 1

为什么不删除点击，然后在淡出完成后重新添加：

$(".layout a").click(clickHandler);


function clickHandler() {
    var self = $(this)
    self.unbind('click', clickHandler);

    var rel = $(this).attr('rel'); 
    $.cookie("Layout", $(this).attr('name'), { expires: 365, path: '/media', secure: true });
    $('.content, .searchresults').fadeOut(250, function () {     
       $("link:first").attr("href", rel); 
       window.scrollTo(0, 0);
      self.click(clickHandler); }).delay(150).fadeIn(225); 
    return false;
}

Answer 2

您可以添加一些标记（css类，自定义属性，数据属性等），以显示当前正在处理的内容。以下是如何实施的示例：

$(function () {
    $(".layout a").click(function () {
        var $this = $(this);        
        if ($this.data('inprocess') == true)
            return false;

        $this.data('inprocess', true);
        window.setTimeout(function() { $this.data('inprocess', false); }, 250);


        var rel = $(this).attr('rel'); 
        $.cookie("Layout", $(this).attr('name'), { expires: 365, path: '/media', secure: true });
        $('.content, .searchresults').fadeOut(250, function () {     
           $("link:first").attr("href", rel); window.scrollTo(0, 0); }).delay(150).fadeIn(225); 
        return false;
    });
});

Answer 3

如果主要问题是防止点击功能，当一个人已经在运行时，

更新：感谢@John Koerner查找我的代码错误。我认为接受的答案是我看到并赞成它时最好的方法。

但这是我更新的答案，

$.fn.onlyOneClick = function () {
    this.one("click", function () {
        var self = $(this);
        alert("clicked");
        $("div").fadeIn(1500, function () {
            $(this).fadeOut(1500, function () {
                self.onlyOneClick();
            });
        });
    });
}
$("span").onlyOneClick();

DEMO

防止点击250ms功能

3 个答案: