前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >让input propertychange事件时间延时执行

让input propertychange事件时间延时执行

作者头像
jwj
发布2022-05-18 11:33:34
8100
发布2022-05-18 11:33:34
举报

在使用input propertychange事件时,遇到一个问题。我输入一个字时,会重复执行五六次事件,事件里又包含了网络请求,体验非常差。经过搜索,找到了解决办法,详情如下。

代码

代码语言:javascript
复制
// 监听textarea的输入
$(document).on('input propertychange', 'textarea', function () {
    var detailsElement = $(this),
        details = $(this).val();
    // 确保是propertychange事件,并且是改变了内容
    if (window.event && event.type == 'propertychange' && event.propertyName != 'value')
        return;

    // 清除旧的定时器
    window.clearTimeout($(this).data('timeout'));
    // 设置新的定时器
    $(this).data('timeout', setTimeout(function () {
        // 这里放置要执行的代码
        console.log('值改变了~输入值:' + details);
    }, 5000)); // 延时值:5000 = 5秒
});

原理

1.监听textarea多行文本输入框的inputpropertychange事件 2.事件触发后,判断是否是propertychange事件,并且是改变内容的propertychange事件 3.清除旧的定时器,然后设置新的定时器。这样在一定时间内,回调函数不会重复执行,只会执行一次。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-12-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码
  • 原理
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档