How resource intensive is updating a span every 10ms with JQuery

Question

This is basically a follow up to my yesterday's question.

I managed to get a span perfectly on top my my input text (the span should be replicating the input text).

Since there doesn't seem to be a good way of hiding the original input text, I decided to just update the span rapidly enough to make it seamless, like this:

var updatespan = function(){
    document.getElementById('street1span').innerHTML = document.getElementById('street_1').value.substring(0, 15) + '<span style="color: red;">' + document.getElementById('street_1').value.substring(15) + '</span>';
  };

    $('street_1').on('focus', function(e){
      interval1 = setInterval(updatespan, 10);
    });

Now I am wondering how resource intensive updating a span every 10ms would be? (I do clear the interval on blur)

I know JQuery is client side, but I just have a hard time putting things into perspective.

Of course, if there is a better way of doing this I would be happy to hear.

It does, then you can see the original for a split second... — Metal Mathematician, Aug 16 '17 at 06:40
Why dont you just set the input fields text color to white ? `color: transparent;` on the input field should do the trick — Doomenik, Aug 16 '17 at 06:41
if you're getting the value of the input field, you better just use onchange, oninput event that will modify the span element attribute everytime the input field content is changed, instead of using setInterval — Abana Clara, Aug 16 '17 at 06:42
@Doomenik this also makes the cursor transparent, which is confusing.. — Metal Mathematician, Aug 16 '17 at 06:47
Note that 10 ms is quicker than the refresh interval in most cases. Also, most modern browsers will let you see the CPU impact of your code. — jcaron, Aug 16 '17 at 06:56
@JurģisTomsLiepiņš can I put on an answer so you can mark it? — Abana Clara, Aug 16 '17 at 07:09

score 1 · Accepted Answer · answered Aug 16 '17 at 07:14

If you're getting the value of the input field, you better just use onchange or oninput event that will modify the span element attribute everytime the input field content is changed, instead of using setInterval.

document.getElementById('street_1').oninput = function(){ updatespan(); }

How resource intensive is updating a span every 10ms with JQuery

1 Answers1