index.php:
<div class="start">START</div>
<div class="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
update1.php:
<div class="fire">FIRE<div>
<div class="result"></div>
update2.php:
$json = array(
'unique' => uniqid(),
);
echo json_encode($json);
script.js:
$(document).off("click", ".start").on("click", ".start", function (event) {
$.ajax({
url: "update1.php",
data: {},
type: "POST",
success: function (data) {
$(".content").html(data);
}
})
});
$(document).off("click", ".fire").on("click", ".fire", function (event) {
$.ajax({
url: "update2.php",
type: "POST",
dataType: "json",
encode: true,
data: {},
success: function (data) {
$(".result").html(data.unique);
}
});
});
I load some data via Ajax and after that I load a Unique ID with json encode. It is working well. The only problem is, that on every click "FIRE" the loading of the Unique ID is getting slower and slower.
The loading time is more or less like this
- Click "FIRE" ---> Loading time of Unique ID: 0sek
- Click "FIRE" ---> Loading time of Unique ID: 2sek
- Click "FIRE" ---> Loading time of Unique ID: 4sek
- Click "FIRE" ---> Loading time of Unique ID: really long that the mouse waiting symbol is turning and turning.
Note: The Unique ID is just an example. Same thing is happening with a normal variable
I tested update2.php
with $time_start = microtime(true);
, $time_end = microtime(true);
and $execution_time = ($time_end - $time_start)/60;
The result is:
- Click "FIRE" ---> 4.91499900818E-5
- Click "FIRE" ---> 5.54800033569E-5
- Click "FIRE" ---> 5.33978144328E-5
- Click "FIRE" ---> 5.43832778931E-5