防抖函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖函数</title>
</head>
<body>
    <input type="text" id="input">

    <script>
    var input = document.getElementById('input') // document 对象属性和方法 ； 返回对拥有指定 id 的第一个对象的引用
    //防抖函数
    function debounce(delay,callback) {     //  去掉callback 输出在里面  翻译 -- delay -- 延迟
        let timer
        return function (value) {
            clearTimeout(timer)     //  阻止 setTimeout() 方法执行函数
                //我们想清除的是setTimeout 我们应该存储这个timer的变量
                //timer变量需要一直保存在内存中
            timer = setTimeout(function () {    //  setTimeout 该方法用于在指定的毫秒数后调用函数或计算表达式
                // console.log(value) 让输出结果在外面
                callback(value)
            },delay)
        }
       
    }

    //外部輸出結果，例如在這裡輸出

    function fn (value) {
        console.log(value)
    }


    //我需要的是输入框的结果只出现一次 且是在键盘停止输入后的一秒后打印
    var debounceFunc = debounce(1000,fn)
    input.addEventListener('keyup',function (e) {   // 输入框监听事件
        debounceFunc(e.target.value)
    })

    // 闭包： 函数里面return函数
    </script>
</body>
</html>
posted @ 2021-10-29 10:31  TM_cc  阅读(66)  评论(0)    收藏  举报