How can I replace text dynamically time after time
up vote
6
down vote
favorite
I want to replace the content of a paragraph using items from an array dynamically time after time. The output is fine when I use console.log() to check the results. But it is not replacing the content on the paragraph as expected, just shows the last word when the iteration is complete.
Here is my code to create and iterate an array:
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = new Array();
_array = _strng.split(' ');
jQuery.each(_array, function(index,item)
{
console.log(item); //works fine
$('p').html(item); //only shows the last word when the iteration is over
wait(1000); //custom function
console.clear();
});
});
The wait() function:
function wait(_timeframe)
{
var final = 0;
var timeframe = new Date(_timeframe);
var initial = Date.now();
final = initial + _timeframe;
while (Date.now() < final) { };
}
HTML code:
<p>Text to be replaced here</p>
javascript jquery html
add a comment |
up vote
6
down vote
favorite
I want to replace the content of a paragraph using items from an array dynamically time after time. The output is fine when I use console.log() to check the results. But it is not replacing the content on the paragraph as expected, just shows the last word when the iteration is complete.
Here is my code to create and iterate an array:
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = new Array();
_array = _strng.split(' ');
jQuery.each(_array, function(index,item)
{
console.log(item); //works fine
$('p').html(item); //only shows the last word when the iteration is over
wait(1000); //custom function
console.clear();
});
});
The wait() function:
function wait(_timeframe)
{
var final = 0;
var timeframe = new Date(_timeframe);
var initial = Date.now();
final = initial + _timeframe;
while (Date.now() < final) { };
}
HTML code:
<p>Text to be replaced here</p>
javascript jquery html
4
Because that's whathtml()
does. It replaces content
– Taplar
6 hours ago
3
There existssetInterval()
andsetTimeout()
functions on Javascript for your purposes, avoid using a custom wait. Here is a good tutorial for you: Timing On JS
– D. Smania
6 hours ago
2
Yourwait
function blocks the ui.. usewindow.setTimeout
– Philipp
6 hours ago
i think you are trying to append, not replace all the p tags with all elements (the last will be final as there are no more itterations
– DarkMukke
6 hours ago
Show us thewait()
function, please. I suspect it makes use ofsetTimeout()
which is delayed execution, so really everything would just happen at once in the future.
– Mark Carpenter Jr
5 hours ago
add a comment |
up vote
6
down vote
favorite
up vote
6
down vote
favorite
I want to replace the content of a paragraph using items from an array dynamically time after time. The output is fine when I use console.log() to check the results. But it is not replacing the content on the paragraph as expected, just shows the last word when the iteration is complete.
Here is my code to create and iterate an array:
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = new Array();
_array = _strng.split(' ');
jQuery.each(_array, function(index,item)
{
console.log(item); //works fine
$('p').html(item); //only shows the last word when the iteration is over
wait(1000); //custom function
console.clear();
});
});
The wait() function:
function wait(_timeframe)
{
var final = 0;
var timeframe = new Date(_timeframe);
var initial = Date.now();
final = initial + _timeframe;
while (Date.now() < final) { };
}
HTML code:
<p>Text to be replaced here</p>
javascript jquery html
I want to replace the content of a paragraph using items from an array dynamically time after time. The output is fine when I use console.log() to check the results. But it is not replacing the content on the paragraph as expected, just shows the last word when the iteration is complete.
Here is my code to create and iterate an array:
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = new Array();
_array = _strng.split(' ');
jQuery.each(_array, function(index,item)
{
console.log(item); //works fine
$('p').html(item); //only shows the last word when the iteration is over
wait(1000); //custom function
console.clear();
});
});
The wait() function:
function wait(_timeframe)
{
var final = 0;
var timeframe = new Date(_timeframe);
var initial = Date.now();
final = initial + _timeframe;
while (Date.now() < final) { };
}
HTML code:
<p>Text to be replaced here</p>
javascript jquery html
javascript jquery html
edited 5 hours ago
D. Smania
2,7901321
2,7901321
asked 6 hours ago
Agnelio Lhavanguane
312
312
4
Because that's whathtml()
does. It replaces content
– Taplar
6 hours ago
3
There existssetInterval()
andsetTimeout()
functions on Javascript for your purposes, avoid using a custom wait. Here is a good tutorial for you: Timing On JS
– D. Smania
6 hours ago
2
Yourwait
function blocks the ui.. usewindow.setTimeout
– Philipp
6 hours ago
i think you are trying to append, not replace all the p tags with all elements (the last will be final as there are no more itterations
– DarkMukke
6 hours ago
Show us thewait()
function, please. I suspect it makes use ofsetTimeout()
which is delayed execution, so really everything would just happen at once in the future.
– Mark Carpenter Jr
5 hours ago
add a comment |
4
Because that's whathtml()
does. It replaces content
– Taplar
6 hours ago
3
There existssetInterval()
andsetTimeout()
functions on Javascript for your purposes, avoid using a custom wait. Here is a good tutorial for you: Timing On JS
– D. Smania
6 hours ago
2
Yourwait
function blocks the ui.. usewindow.setTimeout
– Philipp
6 hours ago
i think you are trying to append, not replace all the p tags with all elements (the last will be final as there are no more itterations
– DarkMukke
6 hours ago
Show us thewait()
function, please. I suspect it makes use ofsetTimeout()
which is delayed execution, so really everything would just happen at once in the future.
– Mark Carpenter Jr
5 hours ago
4
4
Because that's what
html()
does. It replaces content– Taplar
6 hours ago
Because that's what
html()
does. It replaces content– Taplar
6 hours ago
3
3
There exists
setInterval()
and setTimeout()
functions on Javascript for your purposes, avoid using a custom wait. Here is a good tutorial for you: Timing On JS– D. Smania
6 hours ago
There exists
setInterval()
and setTimeout()
functions on Javascript for your purposes, avoid using a custom wait. Here is a good tutorial for you: Timing On JS– D. Smania
6 hours ago
2
2
Your
wait
function blocks the ui.. use window.setTimeout
– Philipp
6 hours ago
Your
wait
function blocks the ui.. use window.setTimeout
– Philipp
6 hours ago
i think you are trying to append, not replace all the p tags with all elements (the last will be final as there are no more itterations
– DarkMukke
6 hours ago
i think you are trying to append, not replace all the p tags with all elements (the last will be final as there are no more itterations
– DarkMukke
6 hours ago
Show us the
wait()
function, please. I suspect it makes use of setTimeout()
which is delayed execution, so really everything would just happen at once in the future.– Mark Carpenter Jr
5 hours ago
Show us the
wait()
function, please. I suspect it makes use of setTimeout()
which is delayed execution, so really everything would just happen at once in the future.– Mark Carpenter Jr
5 hours ago
add a comment |
2 Answers
2
active
oldest
votes
up vote
5
down vote
Check the next example using the setInterval() method, it will replace the text of the <p>
element every 3 seconds, looping back to the start of the array when it reach the end.
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
add a comment |
up vote
4
down vote
The problem is, that you wait functions blocks the ui. Instead, you should use window.setTimeout
, which calls a callback after a specific time.
You could try something like this for your problem
$(function() {
var words = ["Lorem", "ipsum", "dolor"];
var $element = $("p");
// callback function
var f = function() {
$element.html(words.shift());
if (words.length > 0) {
window.setTimeout(f, 1000);
}
}
// initial call
f();
};
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
Check the next example using the setInterval() method, it will replace the text of the <p>
element every 3 seconds, looping back to the start of the array when it reach the end.
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
add a comment |
up vote
5
down vote
Check the next example using the setInterval() method, it will replace the text of the <p>
element every 3 seconds, looping back to the start of the array when it reach the end.
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
add a comment |
up vote
5
down vote
up vote
5
down vote
Check the next example using the setInterval() method, it will replace the text of the <p>
element every 3 seconds, looping back to the start of the array when it reach the end.
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
Check the next example using the setInterval() method, it will replace the text of the <p>
element every 3 seconds, looping back to the start of the array when it reach the end.
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
$(document).ready(function()
{
var _strng = "Lorem ipsum dolor sit amet";
var _array = _strng.split(' ');
var _idx = 0;
var ival = setInterval(function()
{
var item = _array[_idx++];
console.log(item);
$('p').html(item);
// Check the restart (loop back) condition.
if (_idx >= _array.length)
_idx = 0;
},
3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>INITIAL TEXT...</p>
edited 4 mins ago
answered 6 hours ago
D. Smania
2,7901321
2,7901321
add a comment |
add a comment |
up vote
4
down vote
The problem is, that you wait functions blocks the ui. Instead, you should use window.setTimeout
, which calls a callback after a specific time.
You could try something like this for your problem
$(function() {
var words = ["Lorem", "ipsum", "dolor"];
var $element = $("p");
// callback function
var f = function() {
$element.html(words.shift());
if (words.length > 0) {
window.setTimeout(f, 1000);
}
}
// initial call
f();
};
add a comment |
up vote
4
down vote
The problem is, that you wait functions blocks the ui. Instead, you should use window.setTimeout
, which calls a callback after a specific time.
You could try something like this for your problem
$(function() {
var words = ["Lorem", "ipsum", "dolor"];
var $element = $("p");
// callback function
var f = function() {
$element.html(words.shift());
if (words.length > 0) {
window.setTimeout(f, 1000);
}
}
// initial call
f();
};
add a comment |
up vote
4
down vote
up vote
4
down vote
The problem is, that you wait functions blocks the ui. Instead, you should use window.setTimeout
, which calls a callback after a specific time.
You could try something like this for your problem
$(function() {
var words = ["Lorem", "ipsum", "dolor"];
var $element = $("p");
// callback function
var f = function() {
$element.html(words.shift());
if (words.length > 0) {
window.setTimeout(f, 1000);
}
}
// initial call
f();
};
The problem is, that you wait functions blocks the ui. Instead, you should use window.setTimeout
, which calls a callback after a specific time.
You could try something like this for your problem
$(function() {
var words = ["Lorem", "ipsum", "dolor"];
var $element = $("p");
// callback function
var f = function() {
$element.html(words.shift());
if (words.length > 0) {
window.setTimeout(f, 1000);
}
}
// initial call
f();
};
answered 6 hours ago
Philipp
13.2k22040
13.2k22040
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53601986%2fhow-can-i-replace-text-dynamically-time-after-time%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
4
Because that's what
html()
does. It replaces content– Taplar
6 hours ago
3
There exists
setInterval()
andsetTimeout()
functions on Javascript for your purposes, avoid using a custom wait. Here is a good tutorial for you: Timing On JS– D. Smania
6 hours ago
2
Your
wait
function blocks the ui.. usewindow.setTimeout
– Philipp
6 hours ago
i think you are trying to append, not replace all the p tags with all elements (the last will be final as there are no more itterations
– DarkMukke
6 hours ago
Show us the
wait()
function, please. I suspect it makes use ofsetTimeout()
which is delayed execution, so really everything would just happen at once in the future.– Mark Carpenter Jr
5 hours ago