On my page, I use a simple PHP script called every time a button i pushed. I use this to keep track of how many people has clicked the button. Basically, it just +1 to a table in MySQL.
The problem is that with my code, users can click the button too fast and max out the number of XMLHttpRequests a browser handles. This results in that not all of the number of clicks are recorded.
This is my code that requests the PHP file:
Code:
function count() {
var xmlHttp = getXMLHttp(); // XHR object
xmlHttp.open("POST", "counter.php", true);
xmlHttp.send(null);
}
I've tried this before. The problem is that then the user cannot click the button anymore. There has to be a diffrent way...
Show some code. At least what you tried before since it did not work for you.
The button become re-enabled after the ajax load, so there is probably an error in your code.
Show some code. At least what you tried before since it did not work for you.
The button become re-enabled after the ajax load, so there is probably an error in your code.
What kind of errors are you getting in the error console?
While the button is deactivated the user cannot click it. This is a problem. Obviously, I'm not ONLY making a counter. Something else also happens when you click the button. I don't think we are on the same page here.
What I want exactly is to allow the user to click the button freely, while it counts.
Ok, here is my attempt.
The requests are buffered after a certain amount of active requests to the server, and will be processed when requests have been completed (this is assuming that every single click must notify the server, otherwise a collective notification could happen instead):
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Buffer Clicks</title>
<style type="text/css">
</style>
<script type="text/javascript">
var SendClick = (function()
{
var
limit = 5, //HOW MANY REQUESTS AT A TIME
url = 'counter.php', //WHERE TO SEND THE REQUEST
buffer = 0,
requests = 0;
function notify()
{
var http;
if (buffer && requests < limit) {
++requests; --buffer;
http = new XMLHttpRequest();
http.onreadystatechange = function() {if (http.readyState === 4) {--requests; notify();}};
http.open('POST', url, true);
http.send('');
}
document.getElementById('status').innerHTML = 'Buffered Clicks: ' + buffer + '<br />Active Requests: ' + requests;
}
return function() {++buffer; notify();};
}());
</script>
</head>
<body>
<button onclick="SendClick();">Click Me</button>
<div id="status" style="padding: 10px;">Waiting for click.</div>
</body>
</html>
As a test the PHP page it was querying had a 1 second delay so the buffer could be seen:
While the button is deactivated the user cannot click it. This is a problem. Obviously, I'm not ONLY making a counter. Something else also happens when you click the button. I don't think we are on the same page here.
What I want exactly is to allow the user to click the button freely, while it counts.
It should be deactivated until the document is ready for additional processing (and counting).
I thought in an earlier post you did not want the user clicking to his heart's content
as that screwed with your counter value. Are you changing the rules as you go?
Now you want them to be able to click and count to a limit, but do the load only once?
Yes, I do believe we are not on the same page here.
It should be deactivated until the document is ready for additional processing (and counting).
I thought in an earlier post you did not want the user clicking to his heart's content
as that screwed with your counter value. Are you changing the rules as you go?
Now you want them to be able to click and count to a limit, but do the load only once?
Yes, I do believe we are not on the same page here.
Ok. I might have been a little too quick when writing this. Since I'm sending requests for every time the button is pushed, not all the requests are sent. (I've seen that by clicking 10 times, while it only counted 8 or 6).
It's actually a good idea to deactivate the button if it was not to interfare with the experience when using my Web App.
I tried this: When using sync instead of async, the program was lagging. Reason: JavaScript only supports using one thread.
Web Workers. But it does not yet support mayor browsers like IE9.
My only suggestion is long-polling using COMET or something?
Reply With Quote
Originally Posted by Logic Ali
Bookmarks