JS防抖模糊查询

什么防抖？

1、当事件触发时，相应的函数不会被立即触发，而是会推迟执行。

2、当事件连续密集触发时，函数的触发会被一直推迟。

3、只有当等待一段时间后也没有再次触发该事件，那么才会执行响应函数。

4、总之，防抖就是讲函数的执行延迟一定事件，如果在改时间内重新触发事件，那么延时事件就会重置，只有真正达到延时时间，才会执行回调函数。

防抖的应用场景

1、输入框频繁输入内容，搜索或者提交信息

2、频繁点击按钮，触发某个事件

3、监听浏览器滚动事件

4、监听用户缩放浏览器resize事件

案例：防抖模糊查询

 // 准备好假数据
    let dataArray = ["猪猪侠", "菲菲公猪", "迷糊老登", "波比", "草人强", "拉斯妹", "强强科技", "特斯拉", "比特"]
    let input = document.querySelector("#ipt")
    let ul = document.querySelector(".ul")
    function debounce(fn, delay) {
        // time变量用于保存setTimeout返回的Id
        let timer = null
        return function () {
            // 判断定时器是否存在，如果存在则清除定时器
            timer && clearTimeout(timer)
            // 重新调用定时器
            timer = setTimeout(() => {
                // 改变函数指向
                fn.apply(this, arguments)
                timer = null
            }, delay)
        }
    }
    function inputChange(e) {
        // 创建一个用来容纳匹配结果的数组
        let result = []
        // 遍历所有数据判断如果data.match(input.value)找到了结果就把结果放到数组里面，没有找到就不放
        dataArray.forEach(data => data.match(input.value) === null ? result.push() : result.push(data.match(input.value).input))
        // 判断如果用户输入框里没有内容就把结果长度置为0
        if (input.value === "") result.length = 0
        // 遍历结果数组创建标签并往标签里面添加找到的结果
        result.forEach(data => {
            let li = document.createElement("li")
            li.innerHTML = data
            ul.appendChild(li)
        })
        // 判断如果用户重新输入把输入框置空后要把上一次渲染出来的标签删除
        let li = document.querySelectorAll("li")
        if (input.value === "") li.forEach(ele => ul.removeChild(ele))
    }

    let iprFn = debounce(inputChange, 1000)
    input.oninput = e => iprFn()
    // 绑定键盘事件
    input.onkeydown = e => {
        // 判断如果用户按下键盘就清空渲染好的数据并重新调用功能函数重新渲染
        if (e.keyCode) {
            document.querySelectorAll("li").forEach(ele => {
                ul.removeChild(ele)
                iprFn()
            })
        }
    }

防抖模糊查询