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