if/else with setInterval auto-refreshing and on click refreshing event jquery?

Struggling to get this to work properly…Making an if/else statement with setInterval that if class is clicked, content refreshes, else content auto refreshes after a specific time period. This is what I have for just auto refreshing atm (which works perfectly):

var auto_refreshContentTwo = setInterval (
    function() {
        $('.page_loading_r_content_two_overlay').fadeIn();
        $.ajax({
            url: '../../path/to/page.php',
            success: function(html) {
                var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');
                $('#refreshContentTwo').html(myContentTwoContent);
            }
        });
    }, 495000
);

What I’ve tried to get a “click” function added, but doesn’t do anything…:

$('.contentTwoClicked').on('click', function() {
    var refreshClicked = true;
    if(refreshClicked) {
        alert('clicked');
        $('.page_loading_r_content_two_overlay').fadeIn();
        $.ajax({
            url: '../../path/to/page.php',
            success: function(html) {
                var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');
                $('#refreshContentTwo').html(myContentTwoContent);
            }
        });
    } else {
        var auto_refreshContentTwo = setInterval (
            function() {
                $('.page_loading_r_content_two_overlay').fadeIn();
                $.ajax({
                    url: '../../path/to/page.php',
                    success: function(html) {
                        var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');
                        $('#refreshContentTwo').html(myContentTwoContent);
                    }
                });
            }, 495000
        );
    }
});

Where am I going wrong? Or am I way off-base here…? Any guidance/help would be greatly appreciated!

Answer

You don’t need a conditional statement, but rather a variable to store the set interval in so that it can be cleared and restarted on manual refresh via a calling function:

//variable to store the setInterval
let refreshInterval = '';

//function that calls setInterval
const autoRefresh = () => {
  refreshInterval = setInterval(()=> { 
    refresh();
    console.log("auto");
  },3000)
}

//run setInterval function on page load; 
autoRefresh();

//manual refresh function
const manualRefresh = () => {
  //erases the setInterval variable
  clearInterval(refreshInterval);
  refresh();
  //then recalls it to reset the countdown
  autoRefresh();
  console.log("manual");
}

//for visual purposes
let refreshCount = 0; 

//node refresher function
const refresh = () => {
    const container = document.getElementById("refresh");
    refreshCount ++; 
    container.textContent= "This div will be refreshed"+ ` Refresh Count: ${refreshCount}`; 
}

<button onclick="manualRefresh()">Click to Refresh </button>

<div id="refresh">This div will be refreshed</div>

See it in action: https://codepen.io/PavlosKaralis/pen/rNxzZjj?editors=1111

Edit: Applied to your code I think it would be:

let interval; 

var autoRefresh = () => {
  interval = setInterval (
  function() {
      $('.page_loading_r_content_two_overlay').fadeIn();
      $.ajax({
          url: '../../path/to/page.php',
          success: function(html) {
              var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');
              $('#refreshContentTwo').html(myContentTwoContent);
          }
      });
  }, 495000);
}

$('.contentTwoClicked').on('click', function() {
  
  clearInterval(interval);
  
  alert('clicked');
  $('.page_loading_r_content_two_overlay').fadeIn();
  $.ajax({
      url: '../../path/to/page.php',
      success: function(html) {
          var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');
          $('#refreshContentTwo').html(myContentTwoContent);
      }
  });

  autoRefresh(); 

});

autoRefresh();