Keep Interaction Responsive
Keep Interaction Responsive
Heavy synchronous work can delay input and rendering. Reducing repeated computation helps, but measure actual interactions before choosing an optimization. In a school report, compute a total once rather than rebuilding it for every field.
Before this topic, review Send and Receive JSON if its terms are unfamiliar.
What you’ll learn
- Explain keep interaction responsive through the school example.
- Trace the shown operations and distinguish their result from displayed output.
- Make the practice change and explain its consequence: Computing the edited list once gives the correct total of 230.
Work through the school example
This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.
JavaScript · school.js · complete example
const marks = [70, 80, 90];
const total = marks.reduce((sum, mark) => sum + mark, 0);
console.log(total);
Expected output
240Recognize the important boundary
Fast computation is only one part of usability. Use native controls, visible focus and announced errors; move genuinely heavy work to suitable workers rather than assuming a timer makes it parallel.
Try a small variation
JavaScript · original source for practice
const marks = [70, 80, 90];
const total = marks.reduce((sum, mark) => sum + mark, 0);
console.log(total);
Your task: Replace 70,80,90 with 60,80,90. Predict the result before running the edited program.
The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.
Worked answer and reasoning
Computing the edited list once gives the correct total of 230.
JavaScript · complete worked variation
const marks = [60, 80, 90];
const total = marks.reduce((sum, mark) => sum + mark, 0);
console.log(total);
Expected output
230Predict the original program
JavaScript · original program for this question
const marks = [70, 80, 90];
const total = marks.reduce((sum, mark) => sum + mark, 0);
console.log(total);
Keep the useful idea
Heavy synchronous work can delay input and rendering. Reducing repeated computation helps, but measure actual interactions before choosing an optimization. In a school report, compute a total once rather than rebuilding it for every field.
Check your variation against this explanation: Computing the edited list once gives the correct total of 230.
Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.
Reaching the recap and completing the quizzes are separate milestones.