Cancel Idle Callback Lab

16.7% Acceptance

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.


  1. Implement an event listener for the Add Task button.
  2. Add the task input to the task list using requestIdleCallback().
  3. Show the task ID returned by requestIdleCallback() as data-task-id attribute in the list item.
  4. Implement an event listener for the Cancel Task button.
  5. Cancel the task with the given ID from the input field using cancelIdleCallback().
  6. Remove the corresponding list item from the task list after task cancellation.