をクリアして再起動したsetInterval

Question

divが、それはdiv要素は、それらの単語が含まれていない場合、それはのは、divのテキストがtrueで、4) PLACEHOLDERあるので、間隔がクリアされていると言うが、聞かせて間隔をクリアします画像 を付加します4) PLACEHOLDER含まれている場合テキストが5) PLACEHOLDERに変更されます。間隔を再起動して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); 

は私ではなくてclearIntervalの画像を削除するためにelseステートメントを使用することができますが、私はやるときがあれば解決策は、一度だけ画像を追加することなく、間隔を維持しているように、この画像は何度も何度も追加されますそれは私の最高の賭けになるでしょう：

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>