首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >if/else使用setInterval自动刷新,然后单击刷新事件jquery?

问if/else使用setInterval自动刷新,然后单击刷新事件jquery?
EN

Stack Overflow用户
提问于 2020-06-28 01:06:28
回答 1查看 70关注 0票数 0

在setInterval的if/else语句中,if类被点击,内容刷新,else内容在特定时间段后自动刷新,这很难让它工作。这就是我的自动刷新自动取款机(它工作得很好):

代码语言:javascript
复制
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
);

我试图添加一个"click“函数,但没有做任何事情...:

代码语言:javascript
复制
$('.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
        );
    }
});

我哪里错了?还是我说的太离谱了?任何指导/帮助都将不胜感激!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-28 01:40:49

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

代码语言:javascript
复制
//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}`; 
}
代码语言:javascript
复制
<button onclick="manualRefresh()">Click to Refresh </button>

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

将其付诸实践:https://codepen.io/PavlosKaralis/pen/rNxzZjj?editors=1111

编辑:应用于你的代码,我认为它应该是:

代码语言:javascript
复制
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(); 
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62613071

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档