blocks|key|1026393|text|setInterval方法返回一个句柄，您可以使用该句柄清除间隔。如果你想让函数返回它，你只需要返回方法调用的结果：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1026394|function+intervalTrigger()+{
++return+window.setInterval(+function()+{
++++if+(timedCount+>=+markers.length)+{
+++++++timedCount+=+0;
++++}
++++google.maps.event.trigger(markers[timedCount],+"click");
++++timedCount%2B%2B;
++},+5000+);
};
var+id+=+intervalTrigger();|code-block|syntax|javascript|1026395|然后清除间隔：|1026396|window.clearInterval(id);|1026397|entityMap^0|0|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>The <code>setInterval</code> method returns a handle that you can use to clear the interval. If you want the function to return it, you just return the result of the method call:</p>

<pre><code>function intervalTrigger() {
  return window.setInterval( function() {
    if (timedCount &gt;= markers.length) {
       timedCount = 0;
    }
    google.maps.event.trigger(markers[timedCount], "click");
    timedCount++;
  }, 5000 );
};
var id = intervalTrigger();
</code></pre>

<p>Then to clear the interval:</p>

<pre><code>window.clearInterval(id);
</code></pre>


blocks|key|1026404|text|//+Initiate+set+interval+and+assign+it+to+intervalListener
var+intervalListener+=+self.setInterval(function+()+{someProcess()},+1000);
function+someProcess()+{
++console.log('someProcess()+has+been+called');
++//+If+some+condition+is+true+clear+the+interval
++if+(stopIntervalIsTrue)+{
++++window.clearInterval(intervalListener);
++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1026405|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// Initiate set interval and assign it to intervalListener
var intervalListener = self.setInterval(function () {someProcess()}, 1000);
function someProcess() {
  console.log('someProcess() has been called');
  // If some condition is true clear the interval
  if (stopIntervalIsTrue) {
    window.clearInterval(intervalListener);
  }
}
</code></pre>


blocks|key|1241212|text|the_int=window.clearInterval(the_int);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1241213|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>the_int=window.clearInterval(the_int);
</code></pre>


blocks|key|1026451|text|我能想到的最简单的方法:添加一个类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1026452|只需添加一个类(在任何元素上)，并在间隔内检查它是否存在。我相信，这比任何其他方式都更可靠，更可定制，更跨语言。|1026453|​|1026454|var+i+=+0;
this.setInterval(function()+{
++if(!$('#counter').hasClass('pauseInterval'))+{+//only+run+if+it+hasn't+got+this+class+'pauseInterval'
++++console.log('Counting...');
++++$('#counter').html(i%2B%2B);+//just+for+explaining+and+showing
++}+else+{
++++console.log('Stopped+counting');
++}
},+500);

/*+In+this+example,+I'm+adding+a+class+on+mouseover+and+remove+it+again+on+mouseleave.+You+can+of+course+do+pretty+much+whatever+you+like+*/
$('#counter').hover(function()+{+//mouse+enter
++++$(this).addClass('pauseInterval');
++},function()+{+//mouse+leave
++++$(this).removeClass('pauseInterval');
++}
);

/*+Other+example+*/
$('#pauseInterval').click(function()+{
++$('#counter').toggleClass('pauseInterval');
});|code-block|syntax|javascript|1026455|body+{
++background-color:+#eee;
++font-family:+Calibri,+Arial,+sans-serif;
}
#counter+{
++width:+50%25;
++background:+#ddd;
++border:+2px+solid+#009afd;
++border-radius:+5px;
++padding:+5px;
++text-align:+center;
++transition:+.3s;
++margin:+0+auto;
}
#counter.pauseInterval+{
++border-color:+red;++
}|1026456|
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p+id="counter">&nbsp;</p>
<button+id="pauseInterval">Pause/unpause</button></p>|1026457|1026458|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<h2>Simplest way I could think of: add a class.</h2>

<p>Simply add a class (on any element) and check inside the interval if it's there. This is more reliable, customisable and cross-language than any other way, I believe.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- you'll need jQuery for this. If you really want a vanilla version, ask --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;


&lt;p id="counter"&gt;&amp;nbsp;&lt;/p&gt;
&lt;button id="pauseInterval"&gt;Pause/unpause&lt;/button&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>


<p>Normally, I’d set the interval to a variable and then clear it like <code>var the_int = setInterval(); clearInterval(the_int);</code> but for my code to work I put it in an anonymous function:</p>

<pre><code>function intervalTrigger() {
  setInterval(function() {
    if (timedCount &gt;= markers.length) {
      timedCount = 0;
    }

    google.maps.event.trigger(markers[timedCount], "click");
    timedCount++;
  }, 5000);
};

intervalTrigger();
</code></pre>

<p>How do I clear this? I gave it a shot and tried <code>var test = intervalTrigger(); clearInterval(test);</code> to be sure, but that didn’t work.</p>

<p>Basically, I need this to stop triggering once my Google Map is clicked, e.g.</p>

<pre><code>google.maps.event.addListener(map, "click", function() {
  //stop timer
});
</code></pre>


How do I clear this setInterval inside a function?

jQuery

通常，我会将间隔设置为一个变量，然后像var the_int = setInterval(); clearInterval(the_int);一样清除它，但为了让我的代码正常工作，我将其放在一个匿名函数中：function intervalTrigger() {  setInterval(function() {   ...

问如何在函数中清除此setInterval？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在函数中清除此setInterval？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在函数中清除此setInterval？
EN