Synchronizing changes after deploying to S3 using cloudfront

If I use cloudfront with an S3 origin to serve a web site that has two files. Lets say index.html and app.js. Now if I make changes to the html file and app.js for example remove some functions and add some new functions. Now the way cloudfront works is that the files have an expiration date that I believe is 24-hours. So once 24 hours is up then a request to cloudfront wil check the s3 bucket to see if the file has changed. This is fine if the files both expire at the same time, but what if the html file expires 4 hours after the javascript file?

This would mean that the old HTML File could be calling a function that existed in the old javascript file. However the new Javascript file is being served and it no longer has this function. This would result in an error.

To deal with this, you can send an invalidation request, for both files and when this completes the new content will be served. Invalidation requests can take some time, I personally have seen 10-15 mins for a request to complete. So if I push the edited files(html,js) out to my S3 origin and send an invalidation request and it takes 15 mins to complete. Then just after I send the invalidation request the js file expires and the new JS file is pulled with the old HTML file...My site could be throwing an error for ~15 mins?

WHat if I am serving my html from my servers and just pulling the js from cloudfront/S3? Do I have to time the change of the html on my local server exactly with the successful invalidation request on cloudfront?