![]() ![]() The toggleIdleState() function simply toggles the idle flag and then fires an appropriate event. Then, a timer is used to delay calling toggleIdleState() because the next toggle would be back to idle. If the user is idle, then toggleIdleState() state is called immediately to indicate that the user is not active. If the timer is stopped, then nothing happens if it’s running, then the action is determined based on the user’s current idle state. Whenever the user does something, the last timer should be cleared and then an appropriate action should be taken. It doesn’t actually use the event object for anything, so I didn’t bother defining it as an argument. The first function handleUserEvent() is assigned to be the event handler for mousemove and keydown. Y.IdleTimer.fire(idle ? "idle" : "active") ![]() TId = setTimeout(toggleIdleState, timeout) if it's idle, that means the user is no longer idle I ended up creating two functions for this purpose: Javascript idle timer code#The event handler should be the same for both events so there’s no duplication of code and the handler will have to manage the timeout process. Since both of these methods bubble, I can attach the handler at the document level to manage the entire page (of course, this presupposes that no one stops bubbling before it reaches the document level). To manage the user’s idle state, you need to attach an event handler for both mousemove and keydown. I also created tId, which is a place to store the timer ID when using setTimeout() and timeout, which indicates the default amount of time to wait before declaring the user idle (set to 30,000ms initially, this can be overidden by passing a value into start()). These are used internally to manage the state of the timer and are returned in isIdle() and isRunning(), respectively. Next, I created a couple of flags: idle, which indicates if the user is idle, and enabled, which is indicates if the timer is running. Using Y.Event.Target, the creation and management of custom event objects are done for you, freeing you up to focus on implementation details. This line adds basic event methods, such as fire(), subscribe(), and unsubscribe(). These features led me to a basic interface: Provide a function so I could determine, at any point in time, if the user is idle.Fire an event when the user becomes active after having been idle.Fire an event when the user becomes idle.Allow the idle timer to be started and stopped for proper cleanup of resources.I built this implementation on top of YUI 3 because it has, in a short period of time, become my favorite JavaScript library. With this background in mind, I set out to create an idle timer in JavaScript that is fitting of the complex web applications that might want to use it. What about those users who aren’t capable of using a mouse due to a disability, are they always idle? Once again, the answer is no. If a user is typing a long email or blog post, does that mean they are idle simply because they haven’t moved the mouse? Of course not. This is problematic because there are, of course, two primary input devices (keyboard and mouse) attached to a computer so you’re losing 50% of the picture. There is one major flaw in this approach and that is reliance on mouse events to indicate if the user is active or idle. ![]() The usual JavaScript solution for this involves monitoring the mousemove event and, if there has been no mouse movement in a specific period of time, indicate that the user is idle. This problem has been solved, though I would argue inelegantly, in a lot of web applications: Facebook, WordPress, and Gmail all try to figure out when the user has stopped interacting with the page in order to perform some action. Thus, the quest for determining if the user is idle began. With the introduction of more dynamic, highly interactive web interfaces came the desire to know if the user was actually doing anything at any point in time. Web developers have been interested in whether or not a user is idle since the Ajax explosion hit. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |