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 setIntervallet refreshInterval = '';//function that calls setIntervalconst autoRefresh = () => {&nbsp; refreshInterval = setInterval(()=> {&nbsp;&nbsp; &nbsp; refresh();&nbsp; &nbsp; console.log("auto");&nbsp; },3000)}//run setInterval function on page load;&nbsp;autoRefresh();//manual refresh functionconst manualRefresh = () => {&nbsp; //erases the setInterval variable&nbsp; clearInterval(refreshInterval);&nbsp; refresh();&nbsp; //then recalls it to reset the countdown&nbsp; autoRefresh();&nbsp; console.log("manual");}//for visual purposeslet refreshCount = 0;&nbsp;//node refresher functionconst refresh = () => {&nbsp; &nbsp; const container = document.getElementById("refresh");&nbsp; &nbsp; refreshCount ++;&nbsp;&nbsp; &nbsp; container.textContent= "This div will be refreshed"+ ` Refresh Count: ${refreshCount}`;&nbsp;}<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;&nbsp;var autoRefresh = () => {&nbsp; interval = setInterval (&nbsp; function() {&nbsp; &nbsp; &nbsp; $('.page_loading_r_content_two_overlay').fadeIn();&nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '../../path/to/page.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(html) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#refreshContentTwo').html(myContentTwoContent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; }, 495000);}$('.contentTwoClicked').on('click', function() {&nbsp;&nbsp;&nbsp; clearInterval(interval);&nbsp;&nbsp;&nbsp; alert('clicked');&nbsp; $('.page_loading_r_content_two_overlay').fadeIn();&nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url: '../../path/to/page.php',&nbsp; &nbsp; &nbsp; success: function(html) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myContentTwoContent = $('#refreshContentTwo').html(html).find('#refreshContentTwo2');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#refreshContentTwo').html(myContentTwoContent);&nbsp; &nbsp; &nbsp; }&nbsp; });&nbsp; autoRefresh();&nbsp;});autoRefresh();&nbsp;