使用clearInterval方法后如何再次运行setInterval函数? -Javascript

时间:2018-10-25 11:11:51

标签: javascript jquery setinterval anonymous-function clearinterval

我有一个疑问。 使用了setInterval()方法之后是否可以再次运行clearInterval()函数?

    var statistiche_recenti_storico = 0;
    var orologio_statistiche_recenti;
    orologio_statistiche_recenti = setInterval(function() {
      if (statistiche_recenti_storico == 0) {
        statistiche_recenti_storico = 1;
        alert('end');
        clearInterval(orologio_statistiche_recenti); 
      }
    }, 5000);

    $('#ok').on('click', function(){
        // ????
    });

我想在单击orologio_statistiche_recenti后再次运行#ok。 有可能吗?

此代码位于ready()事件( JQuery )中。

非常感谢,抱歉我的英语...

编辑 这是一个jsfiddle示例:https://jsfiddle.net/tr9hw30a/

3 个答案:

答案 0 :(得分:1)

创建一个函数,然后在您的代码中调用它,这是一种可行的方法。

我已经将您的代码包装在IIFE中,这阻止了'vars'成为全局作用域的一部分,您说您的代码已包含在jQuery ready函数中,因此这对您来说不是必需的。

我定义了一个函数“ startInterval”,该函数处理间隔的创建,该间隔在脚本底部和单击处理程序中调用。请注意,如果您不想在脚本运行后立即触发,请在脚本底部删除对startInterval的调用,仅将其保留在点击处理程序中。

我还检查了startInterval函数,以清除正在运行的任何现有间隔,即停止重复。

// Wrapped in ann IIFE for scoping
(function () {

    var statistiche_recenti_storico = 0;
    var orologio_statistiche_recenti;

    // Define a function which handles the creation of your interval
    function startInterval () {

        // Delete any existing interval
        if (orologio_statistiche_recenti) {

            // You could add a return here instead...
            clearInterval(orologio_statistiche_recenti);
        }

        orologio_statistiche_recenti = setInterval(function() {
            if (statistiche_recenti_storico == 0) {
                statistiche_recenti_storico = 1;
                alert('end');
                clearInterval(orologio_statistiche_recenti); 
            }
        }, 5000);
    }


    $('#ok').on('click', startInterval);

    //Start your interval, by invoking the function
    startInterval();

})();

下面的完整示例。上面的方法工作得很好,由于您的IF语句,您的警报仅触发一次,实际上是在触发间隔。

<!doctype html>
<html>
    <body>

        <button id="ok">OK</button>
        <script
            src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous">
        </script>

        <script>
            // Wrapped in ann IIFE for scoping
            (function () {

                var statistiche_recenti_storico = 0;
                var orologio_statistiche_recenti;

                // Define a function which handles the creation of your interval
                function startInterval () {

                    // Delete any existing interval
                    if (orologio_statistiche_recenti) {

                        // You could add a return here instead...
                        clearInterval(orologio_statistiche_recenti);
                    }


                    orologio_statistiche_recenti = setInterval(function() {

                        if (statistiche_recenti_storico == 0) {

                            // @BUG
                            // You were setting this to 1 after the first interval
                            // thus subsequent calls to this were not triggering the alert.

                            // statistiche_recenti_storico = 1;
                            alert('end');
                            clearInterval(orologio_statistiche_recenti); 
                        }
                    }, 5000);
                }


                $('#ok').on('click', startInterval);

                //Start your interval, by invoking the function
                startInterval();

            })();
        </script>
    </body>
</html>

答案 1 :(得分:0)

var statistiche_recenti_storico = 0;
    var orologio_statistiche_recenti;
    var intervalFn=function() {
      if (statistiche_recenti_storico == 0) {
        statistiche_recenti_storico = 1;
        alert('end');
        clearInterval(orologio_statistiche_recenti); 
      }
    }
    orologio_statistiche_recenti = setInterval(intervalFn, 5000);


    $('#ok').on('click', function(){
        // ????
      setInterval(intervalFn, 5000);
    });

将其作为单独的函数,然后在任意位置使用setInterval(functionName, interval)再次调用。

答案 2 :(得分:0)

	//ogni secondo lancio questo codice con il setInterval
	var statistiche_recenti_storico = 0;
	var orologio_statistiche_recenti;

    var startTimeout = function() {
        if (orologio_statistiche_recenti) {
            clearTimeout(orologio_statistiche_recenti); //interrompo questo setInterval
        }
        orologio_statistiche_recenti = setTimeout(function() {
        console.log('timeout executed');
   	  if (statistiche_recenti_storico == 0) {
	    statistiche_recenti_storico = 1;
	    alert('end');
	  }
	}, 5000);
      }
      startTimeout();

$('#ok').on('click', startTimeout);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ok">OK</div>

实际上,您似乎希望超时而不是间隔。您可以在第一次执行后将其停止。