首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在不重新加载页面的情况下使.one ()方法再次工作

如何在不重新加载页面的情况下使.one ()方法再次工作
EN

Stack Overflow用户
提问于 2020-02-29 23:26:59
回答 2查看 39关注 0票数 0

我有一个聊天应用程序,当用户在TEXTAREA字段中输入文本以在他的名字下添加文本时,我创建了一个聊天应用程序,例如输入...但出于个人原因,我喜欢这个“打字...”只出现一次,而不对每个字符重复。我尝试使用one ()函数,但只有当用户重新加载页面时,它才能再次工作。

代码语言:javascript
运行
复制
$("textarea").one('input', function () {
    HERE IS MY CODE TO ADD "TYPING.." UNDER HIS NAME
});
代码语言:javascript
运行
复制
function sendMessage() {

HERE IS MY CODE TO DELETE "TYPING..." FROM UNDER HIS NAME

}

我怎么才能让它工作呢?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-29 23:52:22

您可以使用一种throttling,使用以下setTimeout-based函数:

代码语言:javascript
运行
复制
// Returns a function that will call its callback argument 
// only when a certain delay has passed. Another callback
// can be called to notify that the delay has expired
function throttle(f, milliseconds, ready = () => null) {
    let timer = -1;
    
    return function () {
        if (timer === -1) f();
        clearTimeout(timer);
        timer = setTimeout(function () {
            timer = -1;
            ready();
        }, milliseconds);
    }
}

function sendMessage(msg) {
    $("div").text("typing...");
}

function clearMessage() {
    $("div").text("");
}

$("textarea").on('input', throttle(sendMessage, 3000, clearMessage));
代码语言:javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>
<div></div>

“打字...”如果在3秒内没有键入,则消息将被清除。如果再次开始键入,则将再次发送/显示消息。在清除消息之前,不会再次发送该消息。

票数 0
EN

Stack Overflow用户

发布于 2020-02-29 23:42:08

您可以使用超时,这将在特定时间后恢复键入状态。在用户继续键入时清除超时。

代码语言:javascript
运行
复制
const textArea = document.querySelector('.area')
const indicator = document.querySelector('.indicator')
let timeout = null

textArea.addEventListener('input', function() {
  clearTimeout(timeout)

  indicator.innerText = 'Typing...'

  timeout = setTimeout(function() {
    indicator.innerText = ''
  }, 300)
})
代码语言:javascript
运行
复制
.area,
.indicator {
  display: block;
  margin: 1rem;
}
代码语言:javascript
运行
复制
<textarea class="area"></textarea>
<span class="indicator"></span>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60466667

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档