-1

I have a div element that works as refresh button using jQuery. What I want to do is stop user pressing it all the time. Let's say I want to disable it for the next 15 seconds. How can I do that?

HTML PART

<div class="am_outter_div">    
<div class="header">ΜΕΝΟΥ</div>
<div class="button_1">BACK</div>
<div class="button_2" id="am_refresh_button">REFRESH</div>
<div class="button_3">TOP</div>
<div class="button_4">NEXT</div>
</div><br><br>

<div id="av_refresh_div">Blah blah blah...</div>

JQUERY PART

var $JQ_ = jQuery.noConflict();
    $JQ_(document).ready(function(){
    $JQ_("#am_refresh_button").click(function(){
    $JQ_("#av_refresh_div").load("index.php #av_refresh_div").fadeOut(1000).fadeIn(1000);});
    });

Also JSFIDDLE here...

4

4 回答 4

3

你可以这样做：

var $JQ_ = jQuery.noConflict(), 
    $btbnRefresh = $JQ_("#am_refresh_button");

 function refreshBind(){     

     $btbnRefresh.on("click",function(){

    // after once click unbind click handler
    $JQ_(this).off("click");

    //show div fade
    $JQ_("#av_refresh_div").load("index.php #av_refresh_div").fadeOut(1000).fadeIn(1000); 

        // after some time re-bind again onclick
        setTimeout(function(){
            $btbnRefresh.on("click",refreshBind);
        },10000);

    });     
}

refreshBind();

在这里工作小提琴：http: //jsfiddle.net/ZdFkf/5/

我希望它有帮助。

于 2013-09-08T11:54:29.347 回答
1

您可以执行以下操作：

  1. 单击时禁用您的div
  2. 设置超时，这将在 x 秒后重新激活您的 div

尝试这个：

$("#am_refresh_button").click(function(){
    if($(this).attr("disabled") != "disabled")
    {
        $("#av_refresh_div").attr("disabled", "disabled");
        $("#av_refresh_div").load("index.php #av_refresh_div").fadeOut(1000).fadeIn(1000);
    }

    setTimeout(function() {
        $("#av_refresh_div").removeAttr("disabled");
    }, 10000); // <-- your time (10 sec atm)
});
于 2013-09-08T11:44:20.707 回答
0 
$JQ_("#am_refresh_button").click(function(){
    //Disable logic goes here
    setTimeOut(function(){
        //Enable the dive here
    },yourDelay);
});

您可以添加任意数量的时间。时间通常以毫秒为单位。

或者

var divEnabled = true;
$JQ_("#am_refresh_button").click(function(){
    if(!divEnabled)
       return;
    divEnabled = false;
    setTimeOut(function(){
        divEnabled = true;
    },yourDelay);
});
于 2013-09-08T11:47:45.853 回答
0

您可以取消绑定单击事件，然后设置超时以在 15 秒后重新绑定它。或者在元素上设置一个变量以指示它是否已启用：

var $JQ_ = jQuery.noConflict();
$JQ_("#av_refresh_div").data("isEnabled", true);

$JQ_(document).ready(function(){
    $JQ_("#am_refresh_button").click(function(){
        if ($JQ_("#av_refresh_div").data("isEnabled")) { 
            $JQ_("#av_refresh_div").data("isEnabled", false);             
            $JQ_("#av_refresh_div").load("index.php#av_refresh_div").fadeOut(1000).fadeIn(1000);
            setTimeout(function() {
                $JQ_("#av_refresh_div").data("isEnabled", true); 
            }, 15000);
        }
    });
});

但是，使用实际的 HTML 可能会更好button，然后您可以执行相同的操作，但实际禁用/启用它们（因此它们会显示为灰色），这将向用户反馈正在发生的事情。此外，它们显然是可点击的（但我猜你的 div 会在它们被设置样式后也是如此，在这种情况下，你可能想要添加/删除一个类以指示可点击性是某种可见的方式）。

于 2013-09-08T11:47:08.863 回答