js 防抖

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

      <input type="text" id="input">

        <script>

              var timer=null

                document.getElementById("input").addEventListener("keyup",function(){

                    console.log(this.value)

                      if(!timer){

                          clearTimeout(timer),

                          timer=setTimeout(()=>{    //使用箭头函数  如果是function this获取的是Windows的对象                                                                                      而不是 input的对象

                            console.log(this.value,'111111')

                          },1000)

                      }

                },false)//false 默认冒泡 true 默认捕获

                </script>

</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 防抖: 多次触发只执行一次, 并在函数触发结束的时候执行。 防抖第一版,无法复用 第二版 3.第三版修改函数调用时...
    rub1cky阅读 324评论 0 0
  • 什么是防抖节流 为了防止某个特定的函数(尤其是内部有异步操作)在未得到结果前被重复执行,或者想要用户输入、页面滚动...
    fyAgent阅读 1,220评论 0 0
  • 在前端开发中会遇到一些频繁的事件触发,例如input,keyup,keydown,scroll,resize,mo...
    tiancai啊呆阅读 864评论 0 7
  • 一、前言 以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。 ...
    我讲你思阅读 626评论 0 1
  • 我一般都轻言细语,这次却一路喊叫,从车厢后面一路跌跌撞撞往前冲,手里举着一块钱。 “我有一块钱!我给你一块钱!” ...
    读书布衣阅读 739评论 0 0