2009-06-30 10 views
15

Może nie ma żadnej różnicy, ale tak czy inaczej lepiej niż drugi (albo tajemniczy „trzeci” lepsze niż obie!) ...jQuery należy używać wielokrotność ajaxStart/ajaxStop obsługi


pierwszy:

var startTime; 

$(document).ready(function() { 

    $("#lbl_ajaxInProgress").ajaxStart(function() { 
     // store the current date/time... 
     startTime = new Date(); 
     // update labels 
     $(this).text('Yes'); 
     $("#lbl_ajaxCallTime").text("-"); 
    }); 

    $("#lbl_ajaxInProgress").ajaxStop(function() { 
     // update labels 
     $(this).text('No'); 
     $("#lbl_ajaxCallTime").text(myFunctionThatCalculatesTime(startTime)); 
    }); 

}); 

sekundę:

var startTime; 

$(document).ready(function() { 

    $("#lbl_ajaxInProgress").ajaxStart(function() { 
     // update labels 
     $(this).text('Yes'); 
    }); 

    $("#lbl_ajaxInProgress").ajaxStop(function() { 
     // update labels 
     $(this).text('No'); 
    }); 

    $("#lbl_ajaxCallTime").ajaxStart(function() { 
     // store the current date/time... 
     startTime = new Date(); 
     // update labels 
     $(this).text("-"); 
    }); 

    $("#lbl_ajaxCallTime").ajaxStop(function() { 
     // update labels 
     $(this).text(myFunctionThatCalculatesTime(startTime)); 
    }); 

}); 
+1

Jako jQuery 1.8, metoda .ajaxStart() powinny być dołączone tylko do dokumentu. – ThdK

Odpowiedz

42

Ciekawostką jest to, że ajaxStart itp. Są w rzeczywistości wydarzeniami jQuery. Na przykład:

$("#lbl_ajaxInProgress").ajaxStart(function() { 
    // update labels 
    $(this).text('Yes'); 
}); 

odpowiada:

$("#lbl_ajaxInProgress").bind("ajaxStart", function() { 
    // update labels 
    $(this).text('Yes'); 
}); 

Oznacza to, że można również dołączyć do nazw ajaxStart/ajaxStop itp co oznacza również, że można zrobić:

$("#lbl_ajaxInProgress").unbind("ajaxStart ajaxStop"); 

można również zrobić:

$("#lbl_ajaxInProgress").bind("ajaxStart.label", function() { 
    // update labels 
    $(this).text('Yes'); 
}); 

$("#lbl_ajaxInProgress").bind("ajaxStop.label", function() { 
    // update labels 
    $(this).text('No'); 
}); 

A następnie:

$("#lbl_ajaxInProgress").unbind(".label"); 

Fajnie, hę?

+0

na pewno jest! Zakładam, że tutaj, ale mówisz, że nie ma znaczenia, w którą stronę? – davidsleeps

+0

Pomocnik ajaxStart jest odpowiednikiem helpera, który właśnie deleguje do wiązania, więc tak, nie ma to znaczenia w żaden sposób. –

+7

wow, to Yehuda Katz! – dfens

2

Wykorzystanie Ajax połączenie w ten sposób ....

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<title>Shouting Code</title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script 
 
\t src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
 
    </script> 
 
</head> 
 
<body> 
 
\t <button type="submit" class="btn btn-default" 
 
\t \t onclick="ajaxRequest(this);"> 
 
\t \t <i class="fa fa-refresh"></i> Ajax Call 
 
\t </button> 
 
\t <script> 
 
    function ajaxRequest(id) 
 
    { 
 
    \t // ajax request 
 
     $.ajax({ 
 
      type: 'post', 
 
      url: '/echo/html/', 
 
      data: { 
 
       html: '<p>This is echoed the response in HTML format</p>', 
 
       delay: 600 
 
      }, 
 
      dataType: 'html', 
 
      beforeSend: function() { 
 
      \t  // alert("start"); 
 
\t \t \t \t $(id).find('i').addClass('fa-spin'); 
 
\t \t \t }, 
 
      success: function(data) { 
 
       alert('Fired when the request is successfull'); 
 
      }, 
 
      complete:function(){ 
 
       // alert("stop"); 
 
\t \t \t \t $(id).find('i').removeClass('fa-spin'); 
 
\t \t \t } 
 
     }); 
 
}</script> 
 
</body> 
 
</html>

Powiązane problemy