美文网首页
文本输入与函数防抖

文本输入与函数防抖

作者: 李霖弢 | 来源:发表于2020-05-28 09:33 被阅读0次

在中文输入法状态中,每键入一个拼音都会触发input事件,造成频繁回调。通常有以下两种解决方案

改变触发事件

改为使用compositionend即可。但对老版本IE和部分手机端浏览器兼容性较差

  • compositionstart:官方解释,触发于一段文字的输入之前,也就是在输入一段需要的文本(第一个字母开始)或语音开始输入时会触发。
  • compositionupdate:正插入新字符;
  • compositionend:已经成功插入字符;

使用函数防抖

函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次。通常用于搜索框搜索输入、窗口的resize事件等

  • 触发事件后等待n秒再执行,如果n秒内事件再次被触发则清除计时器,重新等待n秒再执行

  • 触发事件后立即执行,且n秒内事件再次被触发则无相应

相关文章

  • 文本输入与函数防抖

    在中文输入法状态中,每键入一个拼音都会触发input事件,造成频繁回调。通常有以下两种解决方案 改变触发事件 改为...

  • 函数节流与函数防抖

    函数节流与函数防抖的区别JS魔法堂:函数节流(throttle)与函数去抖(debounce)函数的防抖与节流 自...

  • javaScript 防抖函数

    一. 防抖函数的定义与使用 防抖函数的定义 防抖函数的调用 二. 防抖函数应用场景 其实在HTML 和javaSc...

  • 函数节流与函数防抖

    函数节流 适用场景:按钮防重复点击 函数防抖 适用场景:input输入框搜索

  • 函数防抖与节流

    函数防抖与节流 函数防抖与节流是很相似的概念,但它们的应用场景不太一样。 函数防抖: 任务频繁触发的情况下,只有任...

  • 谈一谈函数防抖与节流

    函数防抖(debounce) 假设我们网站有个搜索框,用户输入文本我们会自动联想匹配出一些结果供用户选择。我们可能...

  • 函数节流和防抖的区别以及应用

    函数防抖(debounce): 含义:延迟函数执行 ; 用处:多用于input框输入时,显示匹配的输入内容。(n秒...

  • JS函数防抖与节流

    函数节流和防抖在前端开发中应用广泛,例如:函数防抖可以用于对用户输入的自动补全操作、函数节流可以用于对用户浏览行为...

  • 防抖和节流

    1、使用场景持续出发的事件,如resize,scroll,mousemove,文本输入等 防抖(debounce)...

  • JavaScript:函数防抖与节流

    什么是函数防抖与节流? 函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。 定义: 防抖: n 秒后在...

网友评论

      本文标题:文本输入与函数防抖

      本文链接:https://www.haomeiwen.com/subject/ayhoahtx.html