求助：使用TheCatAPI实现随机猫图，按钮仅首次点击有效

嘿，我来帮你搞定这个问题！你遇到的情况其实是浏览器缓存在搞鬼——第一次请求http://thecatapi.com/api/images/get的时候，浏览器把这张图存下来了，之后再发相同的请求，它直接返回缓存里的图，根本没去服务器拿新的。

修复方案 #

只需要给API请求URL加一个随机参数，让每次请求的URL都不一样，浏览器就会认为是新请求，去服务器拉新图了。修改你的JavaScript代码就行：

$(document).ready(function() {
  $("#kittyButton").on("click", function(){
    $('.catText').remove();
    // 加个时间戳参数，确保每次URL唯一
    const randomParam = new Date().getTime();
    $("#kitties").attr('src', `http://thecatapi.com/api/images/get?timestamp=${randomParam}`);
  });
});

为什么这样有效？ #

浏览器判断是否使用缓存的依据之一是请求的URL，当URL里的参数变化时，它会把这个请求当成全新的，不会复用之前的缓存内容，自然就能每次都拿到新的猫图啦。

另外，你也可以用Math.random()生成随机数当参数，效果是一样的：

$("#kitties").attr('src', `http://thecatapi.com/api/images/get?rand=${Math.random()}`);

这样修改之后，每次点击Generate按钮，都会加载一张全新的猫图了！

内容的提问来源于stack exchange，提问作者Johan G.