CodePen -> getJSON works only in IE but does not in Chrome or FF, why is that?

please help me with a tip I have created this pen https://codepen.io/Dimas_X/pen/yKEzBE?editors=0010

$(function() { 
  const func = function(){
        let counter = 0;
        return function(){
        $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1",
          function(data){
            $('p').html(data[0].content + '<p>'+ data[0].title  +'</p>');
          });
          counter++;
          $('span').html(counter);
       }
  }
  $('button').on('click', func());
 // $('button').trigger('click');
});

and it works properly only in IE. In Chrome it works when devTools is open. Counter of clicks works, mean click event works. There are no any mistakes in console. Thx in advance.

Solution

I am seeing the request get made several times within the network tab of firefox and chrome, but the response is the same every time. Your application is populating the first response correctly, it just seems as if the first request is being cached.

If you have access to the web server code, it look like wordpress is being used because of wp json. You should add the following code to ensure the response isn't being cached

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Once that is Done I think your code should work just fine.

You can also on the frontend perform a query to a "unique url" each time by making the url .getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1?_=" + new Date().getTime() to prevent caching