Question

所以，让我们说你有这样的事情......

HTML：

<p id="text"></p>

JS：

setTimeout(function() {$('#text').html("First sentence");}, 1000);
setTimeout(function() {$('#text').html("Second sentence");}, 2000);

有没有什么方法可以显示十个这样的句子，而不必写十次相同的代码行？我无法弄清楚......

Answer 1

在var $text = $("#text"); var numbers = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eighth", "Ninth", "Tenth"]; for (var i = 1; i <= 10; ++i) { (function(index) { setTimeout(function() { $text.html(numbers[index-1] + " sentence"); }, i * 1000); })(i); }上创建一个闭包并举办派对。

 socket.on('disconnect', function () {
                socket.removeAllListeners('send message');
                socket.removeAllListeners('disconnect');
                io.removeAllListeners('connection');
            });

https://jsfiddle.net/9z4r1qqk/

Answer 2

类似的东西：

for(var i = 1; i < 10 ; i++) {
    setTimeout(function() {$('#text').html("Sentence #" + i);}, i * 1000);
}

如果您不需要该句子具有该格式。

Answer 3

似乎map正是您所寻找的。

const $elem = $('#text');

[
  ['First sentence', 1000],
  ['Second sentence', 2000],
].map(([text, delay]) => setTimeout(() => $elem.text(text), delay));

在变量中存储指向元素的指针也是一个好主意，因此浏览器只会进行一次搜索。

如果您要设置的内容只是字符串，您也可能希望切换到text方法。

免责声明：此代码是用ES6编写的，所以它不会在IE中工作（但会在Edge中）和Safari。

Answer 4

＆＃13;

var sentences = ['First sentence', 'Second sentence', 'Some other sentence'];
var timerId = null;

function nextSentence() {
  var sentence = sentences.shift();
  $('#text').text(sentence);

  if (sentences.length == 0) {
    window.clearInterval(timerId);
  }
}

timerId = window.setInterval(nextSentence, 1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text"></p>

＆＃13;

只需将要显示的句子添加到sentences变量中，它们应该大约每秒更改一次。

如果您只需要这样做，则可以通过将$('#text').text(sentence);替换为document.getElementById('text').textContent = sentence;来删除jQuery依赖项。

Answer 5

var sequence = [
  ['first sentence',1000],
  ['second sentence',2000]
];

var $target = $('#text');

sequence.map(function(v,i,a){
  return setTimeout(function(){
    $target.innerHtml(v[0]);
  },v[1]);
});

Answer 6

这将作为一个循环运行，只显示最后一个句子完成后的下一个句子。

Sample here

var a = [
  "test 1",
  "test 2",
  "test 3",
  "test 4",
  "test 5"
];

(function update(idx) {

    $("#text").html(a[idx]);
    setTimeout(update, 1000, ((++idx) % a.length));

})(0);

Answer 7

如果您不想多次输入相同的内容（可能在多个位置），请创建一个易于使用的插件

<a href="..//about.html">

$.fn.queuedText = function(text, delay) {
    var self = this;
    text = Array.isArray(text) ? text : [text];
    
    $.each(text, function(_, txt) {
       self.delay(delay).queue(function (next) { 
           self.text(txt);
           next(); 
       });
    });
    
    return self;
}

// To be used as ..........->

$('#text').queuedText([
    "First sentence",
    "Second sentence",
    "Third sentence",
    "Fourth sentence",
    "Fifth sentence",
    "Sixth sentence",
    "Seventh sentence",
    "Eight sentence",
    "Ninth sentence",
    "Tenth sentence"
], 1000);

如何以不同的间隔多次更改文本？

7 个答案: