if/else 与 setInterval 自动刷新和点击刷新事件 jquery？

Question

努力让它正常工作...使用 setInterval 创建一个 if/else 语句，点击 if 类，内容刷新，else 内容在特定时间段后自动刷新。这就是我自动刷新 atm 所拥有的（效果很好）：

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
);

我试图添加“点击”功能，但没有做任何事情......：

$('.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
        );
    }
});

我哪里错了？或者我在这里离基地很远......？任何指导/帮助将不胜感激！

Answer 1

您不需要条件语句，而是需要一个变量来存储设置的间隔，以便可以通过调用函数在手动刷新时将其清除并重新启动：

//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>

查看实际操作：https://codepen.io/PavlosKaralis/pen/rNxzZjj?editors=1111

编辑：应用于您的代码，我认为是：

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();