We can alleviate this problem by delaying the save to localStorage
for a period of time to wait until all of the user interaction has finished. This is pretty easy to implement using JavaScript's setTimeout()
function. We will make this change in the saveTaskList()
method, but first we need a global variable in the TaskAtHandApp
object to keep track of the timeout ID returned by setTimeout()
:
function TaskAtHandApp()
{
var version = "v3.3",
appStorage = new AppStorage("taskAtHand"),
taskList = new TaskList(),
timeoutId = 0;
When changes are pending a save, we want to display a message in the status element at the bottom of the page so the user knows that their changes will be saved. When the actual save has taken place we will update the message and fade it out so the user knows the save is complete. To do that we need to rewrite the setStatus()
method as well:
function setStatus(msg, noFade...