CODEWITHSUNDEEP
javascriptjqueryhtml
Mahdi
Mahdi

Reputation: 135

deleting character from a string one by one

i've been trying to create an effect like a string is being typed in my webpage. In other words that string will appear character by character. so I did this using jquery and succeded . the code I used is something like this,

$(function() {
  var string = "Coming Soon|",
      stringCount = 0;

  setInterval(function(){
    $('.main_section_animate span').append(string[stringCount]);
    stringCount += 1;
  },100);
})

Note that the span tag is empty, nothing is in there.

Problem is now I'm trying to delete the string character by character, backwards. I've tried using setInterval and replace(string[stringCount],''), selecting the main section span and main section span.text() but it didn't work and gave some weird results.

And also there are other thing I tried but mainly some combinition of text() with replace so, anyone can help me out with this?

Upvotes: 3

Views: 669

Answers (4)

Glh
Glh

Reputation: 26

You should probably clear that interval to get the intended result, see: https://jsfiddle.net/2mj5zp7h/

HTML:

<div class="main_section_animate">
<span></span>
</div>

JS:

$(function() {
  var string = "Coming Soon|",
      stringCount = 0;

  var animation = setInterval(function(){
    $('.main_section_animate span').append(string[stringCount]);
    stringCount += 1;
    if(stringCount>=string.length) {
        clearInterval(animation);
        animation = setInterval(function(){
            $('.main_section_animate span').text(string.substr(0,stringCount));
            stringCount -=1;
          if(stringCount<0)
            clearInterval(animation);
        },100);
    }
  },100);
})

Upvotes: 1

Christian Carrillo
Christian Carrillo

Reputation: 2761

can be:

let str = 'Coming Soon |';

const $span = $('.main_section_animate span');

$span.html(str);

const animation = setInterval(() => {
  str = str.slice(0, -1)
  $span.html(str)
  
  !str.length && clearInterval(animation)
}, 100)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span></span>
</div>

Upvotes: 2

bZezzz
bZezzz

Reputation: 1002

EDITED: Change code.

This is a solution for you :)

Use split();

const str = "Coming Soon ...";
let timer;

function deletingEffect() {
	let word = str.split("");
	var loopDeleting = function() {
          word.pop();
          document.getElementById('word').innerHTML = word.join("");
          timer = setTimeout(loopDeleting, 200);
	};
	loopDeleting();
};

deletingEffect();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_section_animate">
<span id="word"></span>
</div>

Upvotes: 1

Nathan Hawks
Nathan Hawks

Reputation: 587

Use .slice() and a simple for loop to get what you need.

let str = 'Coming Soon|';
for (let i = -1+str.length; i > 0; i--) {
  let delay = 100*(str.length-(i+1))
  setTimeout(()=>{
    $('.main_section_animate span').html( str.slice(0, i) );
  }, delay);
}

Notice the for loop starts at .length and walks downwards (i--) while i > 0. This gives you an easy way to use str.slice().

Also notice the removal of setInterval which is a waste of CPU in your case. Instead, just set a one-shot setTimeout for each removal.

Finally, use .html instead of .append.

Upvotes: 0

Related Questions