我的jQuery排隊功能無法在第一時間

Question

<input id='lightson' class="buttonl" type="button" value="On" /> 
<input id='lightsoff' class="buttonl" type="button" value="Off" /> 
<p class="status2"></p> 

<script type="text/javascript"> 
$('#lightson').click(function(){ 
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka()); 
    function callbacka(){ 
     $('.status2').load('status2.php').delay(3000).queue(function() { 
      $(this).empty(); 
     }); 
    } 
}); 

$('#lightsoff').click(function() { 
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb()); 
    function callbackb(){ 
     $('.status2').load('status3.php').delay(3000).queue(function() { 
      $(this).empty(); 
     }); 
    } 
}); 
</script> 

後運行當我點擊lightson，我想在加載的東西我div後三秒清空。另外，當我點擊lightsoff我想加載其他內容並在三秒鐘後清空它，因爲兩個按鈕使用相同的div。

此代碼只能使用一次。當我的頁面加載時，我點擊兩個按鈕中的一個（它與哪個按鈕無關），但是如果我點擊另一個按鈕，它將加載div中的信息，但不會清空它。

我對於時間的工作新的代碼是：

<input id='lightson' class="buttonl" type="button" value="On" /> 
<input id='lightsoff' class="buttonl" type="button" value="Off" /> 
<p class="status2"></p> 

<script type="text/javascript"> 
$('#lightson').click(function(){ 
    $.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka()); 
    function callbacka() { 
     $('.status2').load('status2.php').delay(3000).queue(function(){ 
      $('.status2').empty().dequeue(); 
     }); 
    } 
}); 

$('#lightsoff').click(function() { 
    $.get('http://<?php echo $_SESSION['ip']?>/?3', {}, callbackb()); 
    function callbackb(){ 
     $('.status2').load('status3.php').delay(3000).queue(function() { 
      $('.status2').empty().dequeue(); 
     }); 
    } 
}); 
</script> 

說明了什麼，我想上面的代碼：我有兩個按鈕。當我點擊其中的一個時，我想將值「2」發送到一個URL並在類status2中加載status2.php的內容，並在3secs之後清空類status2。等如果我點擊另一個按鈕。我認爲上面的代碼完成這項工作。 如果我從回調中刪除「（）」，當我點擊按鈕時只發送值「2」而沒有其他的事情發生。

Answer 1

<script type="text/javascript"> 
    $('#lightson').click(function() { 
      $.get("http://<?php echo $_SESSION['ip']?>/?2"); 
      callbacka(); 
    }); 

    function callbacka() {   

       $('.status2').load('status2.php').delay(3000).queue(function() { 
        $('.status2').empty().dequeue(); 
       }); 

    } 

    $('#lightsoff').click(function() { 
      $.get('http://<?php echo $_SESSION['ip']?>/?3'); 
      callbackb(); 
    }); 

    function callbackb() { 

       $('.status2').load('status3.php').delay(3000).queue(function() { 
        $('.status2').empty().dequeue(); 
       }); 

    } 
</script> 

Answer 2

爲了得到這個與動態添加內容的工作，你的連線與事件on

$(document).on("click", "#lightson", function() { 
    var $status = $('.status2'); 
    $status.load('status2.php', function() { 
     setTimeout(function() { $status.empty(); }, 3000); 
    }); 
} 

我成功地測試這一點，但我不認爲我能夠得到阿賈克斯負載工作中小提琴:)

Answer 3

不要把()後callbacka/callbackb。這會調用它們並將$.get的回調設置爲返回值（您的情況爲undefined）。

$.get('http://<?php echo $_SESSION['ip']?>/?2', {}, callbacka); 

此外，delay只適用於動畫。要在load完成後等待3秒鐘，請在load回調內使用setTimeout。

$('.status2').load('status2.php', function() { 
    var $this = $(this); 
    setTimeout(function(){ 
     $this.empty(); 
    }, 3000); 
});