清除并重新启动 setInterval

Question

在我的 setInterval 中，如果 div 包含 4) PLACEHOLDER，它将在前面加上一个图像如果 div 不包含这些词，它将清除间隔假设 div 文本是真实的并且是 4) PLACEHOLDER 所以间隔被清除但随后文本变为 5) PLACEHOLDER 如何重启 Interval 以再次检查 if 语句？

var interval = 500;
var timer = window.setInterval(function() {

   if(jQuery("div.text-split-original").text().trim().indexOf('4) PLACEHOLDER') != -1) {
         $('.scar__label').prepend('<img src="smiley.gif" />');
         clearInterval(timer);
   }

}, interval);

我可以使用 else 语句而不是 clearInterval 来删除图像，但是当我这样做时，图像会被一遍又一遍地添加，所以如果有一个解决方案可以只添加一次图像但让间隔继续播放将是我最好的选择：

var interval = 500;
var timer = window.setInterval(function() {

   if(jQuery("div.text-split-original").text().trim().indexOf('4) PLACEHOLDER') != -1) 
{
  $('.scar__label').append('<img src="smiley.gif" />');


} 
  else
    {
    $(".scar__label img:last-child").remove()
    }
}, interval);

提前致谢。

Answer 1

(function($) {
  var interval = 500;
  var $smiley = $('<img src="smiley.gif" class="smiley" />');
  
  window.setInterval(function() {
    //see if the text is 4)
    if ($("div.text-split-original").text().trim().indexOf('4) PLACEHOLDER') > -1) {
      //only add a smiley if one does not exist
      if ($('.scar__label').find('.smiley').length < 1) {
        $('.scar__label').prepend($smiley);
      }
      //see if the text is 5)
    } else if ($("div.text-split-original").text().trim().indexOf('5) PLACEHOLDER') > -1) {
      //delete that smiley!
      $smiley.detach();
    }
  }, interval);
  
  window.setInterval(function(){
    if ($("div.text-split-original").text().trim().slice(0, 2) === '4)') {
      $("div.text-split-original").text('5) PLACEHOLDER');
    } else {
      $("div.text-split-original").text('4) PLACEHOLDER');
    }
  }, 2000);
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="scar__label"></label>
<div class="text-split-original">4) PLACEHOLDER</div>

清除并重新启动 setInterval

Clear and Restart setInterval

javascript

jquery

if-statement

setinterval

clearinterval