Cancel Idle Callback Lab
In this lab, you will be working with requestIdleCallback()
and cancelIdleCallback()
. The requestIdleCallback()
function is used to schedule non-essential work or tasks that need to be performed when the browser is in idle state or during free time. It receives a callback function that will be executed during the browser's idle time. The cancelIdleCallback()
function is used to cancel a previously scheduled idle callback. It requires the ID returned by requestIdleCallback()
to cancel the callback.
Your task is to create an application that schedules tasks to run during idle time and allows the user to cancel a specific task using a button. The application should have an input field with an ID of taskInput
, an Add Task
button with an ID of addBtn
, and a Cancel Task
button with an ID of cancelBtn
. The tasks will be displayed in an unordered list with an ID of taskList
. Each list item should have a data attribute of data-task-id
containing the task ID.
Challenges
- Implement an event listener for the
Add Task
button. - Add the task input to the task list using
requestIdleCallback()
. - Show the task ID returned by
requestIdleCallback()
asdata-task-id
attribute in the list item. - Implement an event listener for the
Cancel Task
button. - Cancel the task with the given ID from the input field using
cancelIdleCallback()
. - Remove the corresponding list item from the task list after task cancellation.