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

1 个答案: