En la programación web, se utiliza el Ajax para que los datos resultantes se muestren en una parte de la página web, sin recargar la página. El usuario necesita realizar la solicitud de Ajax y quiere el resultado dentro de un período de tiempo. En este escenario, la característica de tiempo de espera de jquery se usa en el código. El tiempo de espera de la sesión ha sido una característica muy común en las aplicaciones web basadas en Ajax.
En la interfaz receptiva, el programador necesita retrasar la solicitud de ajax para lograr alguna tarea antes de la respuesta. Esto se puede lograr usando la función jQuery setTimeout() . Esta función ejecuta el código Ajax dado después de una cierta cantidad de tiempo.
Sintaxis:
$.ajax(page_url);
$.ajax(page_url,[options]);
Parámetros:
- page_url: este parámetro se utiliza para enviar o recuperar datos.
- opciones: este parámetro se utiliza para contener los otros ajustes de configuración necesarios para la solicitud ajax.
El siguiente ejemplo ilustra el enfoque:
Ejemplo 1:
- Fragmento de código:
$.ajax({
url: "test.php",
error: function(){
//Error code
},
success: function(){
//Success code
}
timeout: 5000 // sets timeout to 5 seconds
});
- La función de éxito se ejecuta si la solicitud tiene éxito. O, a veces, si ocurre un error, es mejor responder rápidamente que esperar más tiempo. Esto se maneja en la función de error . El siguiente programa explica la implementación de la opción de tiempo de espera en la parte del código ajax. El tiempo de espera es el número que especifica el tiempo en milisegundos para que se maneje la solicitud.
Programa:
- Archivo HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set timeout for ajax using jQuery</title>
<style>
body {
width: 450px;
height: 300px;
margin: 10px;
float: left;
}
.height {
height: 10px;
}
</style>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script language="javascript">
var ajaxObject = null;
// ajaxcall function will handle ajax call
function ajaxCall() {
var dataquery = 'true';
if (ajaxObject != null) {
ajaxObject.abort();
$("#ajaxOutput")
.html("Ajax aborted for initialization again! ");
ajaxObject = null;
}
// creating ajax call
ajaxObject = $.ajax({
// setting the url
url: "data.php",
data: {
dataquery: ''
},
// Set to 5 seconds for timeout limit
timeout: 5000,
//Check for success message in ajaxOutput div
success: (function(response, responseStatus) {
if (responseStatus == 'success') {
$("#ajaxOutput").html(response);
}
}),
// Check for existence of file
statusCode: {
404: function() {
$("#ajaxOutput")
.html("File does not exists!");
}
},
// If the time exceeds 5 seconds
// then throw error message
error: function(xhr, textStatus, errorThrown) {
if (textStatus == 'timeout') {
$("#ajaxOutput")
.html("Error : Timeout for this call!");
}
}
});
}
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b> Set timeout for ajax using jQuery </b>
<div class="height"> </div>
<div>
<button type="button" onclick="ajaxCall()">
Send Data
</button>
<div class="height"> </div>
<div id="ajaxOutput"> </div>
</div>
</body>
</html>
- Archivo PHP: El siguiente archivo PHP se usa en el ejemplo anterior.
php
<?php
if($_GET["dataquery"]=='true')
{
sleep(7);
}
echo "Welcome to GeeksForGeeks";
?>
Producción :
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: setTimeout () es una función jQuery que ejecuta un fragmento de código después de retrasar un límite de tiempo específico. Por ejemplo, retrasar una ventana emergente por un límite de tiempo específico, para un usuario que visita algún sitio web. Este método acepta un puntero a una función como su primer parámetro. En este ejemplo, retrasa el código Ajax durante 4 segundos usando el método setTimeout() .
Fragmento de código :
function callerFunction(){
alert("jQuery setTimeOut execution is fine!");
}
setTimeout(callerFunction, 4000);
var callerFunction = function(){
alert("Execution point!");
};
setTimeout(callerFunction, 4000);
Programa:
- Archivo HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set timeout for ajax using jQuery</title>
<style>
<style> body {
width: 450px;
height: 300px;
margin: 10px;
float: left;
}
.height {
height: 10px;
}
</style>
<script src=
"https://code.jquery.com/jquery-3.4.1.js">
</script>
<script>
$(function() {
var timedelay = 4000;
$('#sendData').on('click', function() {
$.ajax({
type: 'POST',
url: 'test.php',
data: {
"data": "checkData"
},
success: function(response) {
setTimeout(function() {
$('#ajaxOutput')
.append(response);
}, timedelay);
}
});
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b>Set timeout for ajax using jQuery</b>
<div class="height"></div>
<div>
<button type="button" id="sendData">
Set timeout for getting data
</button>
<div class="height"></div>
<div id="ajaxOutput"></div>
</div>
</body>
</html>
- Archivo PHP: para el código de ejemplo anterior, use el siguiente archivo PHP.
php
<?php
if(isset($_POST['data']) && $_POST['data'] == 'checkData'){
$data['value1'] = 'Successfully received first data';
$data['value2'] = 'Successfully received second data';
$response = json_encode($data);
echo $response;
}
?>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Cancele el tiempo de espera: a veces, el programador necesita cancelar el temporizador establecido en el código utilizando el método jQuery clearTimeout() .
- Fragmento de código:
var timerValue = setTimeout(timerFunction, 5000); clearTimeout(timerValue);
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA