Question

这是来自JavaScript的小孩，我被卡住了。每次用户点击标题时如何才能提高setInterval？我尝试了几种解决方案，例如setInterval(moveheading,counter)或创建多个setIntervals，但它似乎总是选择最快的一种，然后继续失去第二种最慢（产生相反的预期效果）。

我已经读过，setTimeOut可能会更好地解决这个问题，但我很难搞清楚如何解决问题。如果您需要进一步参考，可以在线找到“儿童JavaScript”一书。此挑战所在的页面是166。

<!DOCTYPE html>
<html>


<head>
    <title>MouseMove</title>
</head>

<body>
    <h1 id='heading'> Try and click me 10 times.</h1>

    <script src='https://code.jquery.com/jquery-2.1.0.js'></script>

    <script>
        var leftOffset = 0;
        var topOffset = (200, 0);
        var rightOffset = 200;
        var toTheTop = (0, 200);
        var counter = 10;
        var congrats = "Congrats you Win!"


        var moveHeading = function() {


            $('#heading').offset({
                top:0,
                left: leftOffset
            });
            leftOffset++;


            if (leftOffset > 200) {


                $('#heading').offset({
                   top: topOffset,
                    left: 200

                });
                topOffset++;


            }
            if (topOffset > 200) {
                 $('#heading').offset({
                     left:rightOffset,
                     top: 200

            });
           rightOffset--                           

            };
             if (rightOffset < 0) {
                $('#heading').offset({
                 left:(200,0),
                    top:toTheTop


                });
                toTheTop--;
             }

           <p> ijfsdkfjnlskdjfklsdjfs</P>

        if (toTheTop < 0){
      leftOffset = 0,
        topOffset = (200, 0),
         rightOffset = 200,
          toTheTop= (200);


            }


        };

   var ghost = function () {
       $("#heading").text(counter)
       counter--;
   }


     var chill =function ()  {

  if (counter < 7 )
        clearInterval(nuts);}


    var nuts = setTimeout(moveHeading,1000)

  $("#heading").click(moveHeading)
         $("#heading").click(ghost)

        $("#heading").click(chill);
    </script>

</body>
</html>

Answer 1

为什么你可以将settimeout设为setinterval，

function function1(time) {
    console.log("Time is :" + time); // run this it is actually funny
}
let x;
function runner(time) {
    function1(time);
    x = setTimeout(function() {
        runner(1000);
    }, time);
    clearTimeout(x); // Comment out this clear timeout and see the output
}

runner(100);

尝试这种类型的解决方案

Answer 2

要设置不同（动态）持续时间，我们需要使用clearInterval()停止当前计时器，然后使用新计数器重新运行计时器。

每次用户点击时，如何使setInterval增加？

2 个答案: