Javascript 如何根据元素中的字符数在延迟后隐藏元素

我有这样的

信息

。此

没有特定的

宽度，取决于其文本。应该注意的是，它的文本并非一直都是相同的，有时会发生变化。所以我想根据元素中的字符数在延迟后隐藏它

我可以用这样一个持续的延迟来做到这一点：（例如）

但是我需要一个动态延迟时间。我想隐藏包含短消息的
比包含长消息的
更快

例如：

// hide after 1 sec
<div class='error_message'> message </div>

// hide after 2 sec
<div class='error_message'> message  message </div>

// hide after 3 sec
<div class='error_message'> message  message  message </div>

//1秒后隐藏
消息
//2秒后隐藏
消息消息
//3秒后隐藏
信息信息

等等

有什么解决办法吗

function countWords(string) {
  var ret = 0;
  string.replace(/(\b+)/g, function(a) { ret++; });
  return ret;
}
var len = 1000*countWords($(element).text());
$(element).delay(len).hide(200);

我怀疑有类似的事情

我怀疑有类似的事情吗？
那么：

$("element").each(function(){
  var delay = $(this).html().length * 2; 
  $(this).delay(delay).hide(200);
});

那么：

$("element").each(function(){
  var delay = $(this).html().length * 2; 
  $(this).delay(delay).hide(200);
});

虽然您已经接受了答案，但我想我会提供一个使用纯JavaScript的替代解决方案——如果只是为了完成感，因为您标记了问题——因此，一种可能性是：

function wordDependentFadeOut (el) {

    // retrieving the textContent of the supplied Node ('el'),
    // trimming that textContent to remove leading/trailing white-space,
    // splitting the resulting string by any remaining white-space (between words)
    // to produce an array of individual words,
    // finding the length of the resulting array and concatenating the 's' character:
    var delayInSeconds = el.textContent.trim().split(/\s+/).length + 's';

    // adding the 'fadeOut' class to the supplied node:
    el.classList.add('fadeOut');

    // setting the transition property of the node,
    // 'all' : we're transitioning all (animatable) CSS properties,
    // 'delayInSeconds' : the transition-duration,
    // 'linear' : the transition timing function,
    // 'delayInSeconds' : the transition-delay;
    // this animates between the properties defined in the CSS
    // for the '.error_message' class and those defined in the
    // (more specific) '.error_message.fadeOut' rules:
    el.style.transition = 'all ' + delayInSeconds + ' linear ' + delayInSeconds;
}


// Using Function.prototype.call() along with Array.prototype.slice to
// convert the results of document.querySelectorAll() into an Array rather
// than a NodeList; iterating over the Array using Array.prototype.forEach():
Array.prototype.slice.call(document.querySelectorAll('div.error_message'), 0).forEach(function (node) {
    // the first argument (here: 'node') is the array-element of the array
    // over which we're iterating.

    // calling the function, passing the current array-element (a node):
    wordDependentFadeOut(node);
});


参考资料：


CSS:




JavaScript:










虽然您已经接受了答案，但我想我会提供一个使用纯JavaScript的替代解决方案——如果只是为了完成感，因为您标记了问题——因此，一种可能性是：

function wordDependentFadeOut (el) {

    // retrieving the textContent of the supplied Node ('el'),
    // trimming that textContent to remove leading/trailing white-space,
    // splitting the resulting string by any remaining white-space (between words)
    // to produce an array of individual words,
    // finding the length of the resulting array and concatenating the 's' character:
    var delayInSeconds = el.textContent.trim().split(/\s+/).length + 's';

    // adding the 'fadeOut' class to the supplied node:
    el.classList.add('fadeOut');

    // setting the transition property of the node,
    // 'all' : we're transitioning all (animatable) CSS properties,
    // 'delayInSeconds' : the transition-duration,
    // 'linear' : the transition timing function,
    // 'delayInSeconds' : the transition-delay;
    // this animates between the properties defined in the CSS
    // for the '.error_message' class and those defined in the
    // (more specific) '.error_message.fadeOut' rules:
    el.style.transition = 'all ' + delayInSeconds + ' linear ' + delayInSeconds;
}


// Using Function.prototype.call() along with Array.prototype.slice to
// convert the results of document.querySelectorAll() into an Array rather
// than a NodeList; iterating over the Array using Array.prototype.forEach():
Array.prototype.slice.call(document.querySelectorAll('div.error_message'), 0).forEach(function (node) {
    // the first argument (here: 'node') is the array-element of the array
    // over which we're iterating.

    // calling the function, passing the current array-element (a node):
    wordDependentFadeOut(node);
});


参考资料：


CSS:




JavaScript:










听起来延迟取决于句子中的字数，而不是字符数。是吗？@Ala-em，我想没什么区别，我需要一个合理的延迟时间。。。！听起来延迟取决于句子中的字数，而不是字符数。是吗？@Ala-em，我想没什么区别，我需要一个合理的延迟时间。。。！为什么使用
str.replace
？这是一种计算字符串中单词数的非常小的代码占用方式。从我放的一个旧代码片段中借用了这段代码。为什么使用
str.replace
？这是一种计算字符串中单词数的非常小的代码占用方式。从我的旧代码片段中借用了这段代码。谢谢+我投你一票。。。只需编辑
*2
并将其设置为
*50
。这将是更合理的延迟时间，谢谢+我投你一票。。。只需编辑
*2
并将其设置为
*50
。延迟时间会更合理是的，它会更短，因为jQuery通过使用多个函数来处理循环、延迟和隐藏，这些函数被称为“underthehood”。另外，我不是使用
setInterval（）
迭代多个动画，而是将字符串传递给每个元素的
样式
属性。我并没有特别优化它，但如果它至少不如jQuery解决方案那么高效，我会感到惊讶；记住jQuery所做的一切都是基于本机JavaScript构建的，带有跨浏览器兼容性的条件——虽然表面上看起来很简单，但实际上要复杂得多而不是
不透明度：0 | 1？不，不幸的是CSS只能在数值之间转换；要隐藏元素，您需要为
.error\u message
类定义一个显式的
高度
或
宽度
，并在
.error\u message.fadeOut
样式规则中将这些属性设置为
0
。是的，它更短，因为jQuery正在处理循环、延迟和隐藏，通过使用多个被称为“引擎盖下”的功能。另外，我不是使用
setInterval（）
迭代多个动画，而是将字符串传递给每个元素的
样式
属性。我并没有特别优化它，但如果它至少不如jQuery解决方案那么高效，我会感到惊讶；记住jQuery所做的一切都是基于本机JavaScript构建的，带有跨浏览器兼容性的条件——虽然表面上看起来很简单，但实际上要复杂得多而不是
不透明度：0 | 1？不，不幸的是CSS只能在数值之间转换；要隐藏元素，您需要为
.error\u消息
类定义显式的
高度
或
宽度
，并在
.error\u消息.淡出
样式规则中将这些属性设置为
0
。