快捷導(dǎo)航

js如何監(jiān)聽input輸入事件及使用防抖封裝函數(shù)處理方法

更新時間：2023年07月26日 10:55:35 作者：urbaneBin

這篇文章主要給大家介紹了關(guān)于js如何監(jiān)聽input輸入事件及使用防抖封裝函數(shù)處理方法的相關(guān)資料,最近有一個需求,需要我們實(shí)時監(jiān)聽input輸入框中的內(nèi)容,從而帶來更好的用戶體驗(yàn),需要的朋友可以參考下

1.實(shí)現(xiàn)input框的輸入監(jiān)聽事件：

<input id="search" /> //需要監(jiān)聽的dom

//js實(shí)現(xiàn)(介紹兩種方式)
//方式一：利用input的oninput輸入事件實(shí)現(xiàn)輸入監(jiān)聽
let inputChange1 = document.getElementById("search")//獲取inputDom
    inputChange1.oninput = function(){//監(jiān)聽輸入事件
        console.log("監(jiān)聽到input輸入")//輸出
        let value1 = this.value//拿到輸入的值
        let value2 = document.getElementById("search").value//獲取值的方式二
        console.log(value1,value2)//輸出
    }
//方式二：利用input的oninput輸入事件實(shí)現(xiàn)輸入監(jiān)聽
let inputChange2 = document.getElementById("search")//獲取inputDom
    inputChange2.addEventListener("onpropertychange",function(){
         console.log("監(jiān)聽到input輸入")//輸出
        let value1 = this.value//拿到輸入的值
        let value2 = document.getElementById("search").value//獲取值的方式二
        console.log(value1,value2)//輸出
    })

//jquery實(shí)現(xiàn)(介紹一種)

$("#search").bind("input propertychange",function(){
    console.log("監(jiān)聽到input輸入")
    let value = $("#search").val()//拿到輸入的值
    console.log(value)//輸出
})

2.防抖函數(shù)

防抖函數(shù)的目的：為了限制函數(shù)的執(zhí)行頻率而出現(xiàn)，優(yōu)化解決函數(shù)觸發(fā)頻率過高導(dǎo)致延遲及假死卡頓等bug的出現(xiàn)。大多用在查詢和提交功能上。

設(shè)置時間內(nèi)多次點(diǎn)擊或者輸入只會執(zhí)行最后一次點(diǎn)擊或者輸入；

代碼：

/**
     * 防抖函數(shù)的封裝
     * @param func 需要防抖處理的函數(shù)
     * @param wait 等待時間 默認(rèn)賦值了1秒
     * @immediate 第一次是否需要立即執(zhí)行 boolean值 默認(rèn)為 false
     * 
     **/
    function debounce(func, wait = 1000, immediate = false) {
        // 定義一個變量來記錄上一次的定時器函數(shù)的狀態(tài)
        let timer = null
        let isImmediate = false//通過改變量控制函數(shù)是否立即執(zhí)行
        //返回一個函數(shù)
        return function () {
            let _this = this//獲取input的this
            let args = arguments  //接收函數(shù)參數(shù)
            // 返回的變量,讓函數(shù)只執(zhí)行最后一次
            if (timer) {
                clearInterval(timer)   //刪除上一次定時器
            }
            if (immediate && !isImmediate) {//第一次是否需要立即執(zhí)行 當(dāng)immediate和isImmediate 都為一個值時回立即執(zhí)行
                func.apply(_this, args)
                isImmediate = true//使函數(shù)下次不會立即執(zhí)行使其延遲
            } else {
                timer = setTimeout(function () {//將定時器聲明為變量timer
                    func.apply(_this, args)//如果處理函數(shù)需要用到input的this就通過這個apply從新綁定this，不綁定的話treeSearch函數(shù)this指向的是window(直接使用下面的func()就行),
                    // func()//外部傳入的函數(shù) 
                    isImmediate = true//使函數(shù)下次不會立即執(zhí)行使其延遲
                }, wait)//延遲執(zhí)行時間
            }
        }
    }

3.input輸入事件和節(jié)流的結(jié)合（點(diǎn)擊事件也是如此）

<!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>Document</title>
</head>
<body>
    <input id="search" />
</body>
<script>
    let search = document.getElementById("search")//獲取inputDom
    // 需要防抖處理的函數(shù)
    const treeSearch = function () {
        // 邏輯處理
        console.log("通過綁定inputThis得到的value:", this.value);//通過綁定this可以更加方便的使用當(dāng)前監(jiān)聽的input的屬性
        let searchValue = document.getElementById("search").value//不重新綁定this就得重新通過獲取監(jiān)聽dom的方式拿到需要的屬性
        // console.log(searchValue);//不重新綁定this獲取監(jiān)聽dom的方式拿到需要的屬性方式
    }
    //oninput監(jiān)聽input框的輸入事件
    search.oninput = debounce(treeSearch, 2000, true)
    /**
     * 防抖函數(shù)的封裝
     * @param func 需要防抖處理的函數(shù)
     * @param wait 等待時間 默認(rèn)賦值了1秒
     * @immediate 第一次是否需要立即執(zhí)行 boolean值 默認(rèn)為 false
     * 
     **/
    function debounce(func, wait = 1000, immediate = false) {
        // 定義一個變量來記錄上一次的定時器函數(shù)的狀態(tài)
        let timer = null
        let isImmediate = false//通過改變量控制函數(shù)是否立即執(zhí)行
        //返回一個函數(shù)
        return function () {
            let _this = this//獲取input的this
            let args = arguments  //接收函數(shù)參數(shù)
            // 返回的變量,讓函數(shù)只執(zhí)行最后一次
            if (timer) {
                clearInterval(timer)   //刪除上一次定時器
            }
            if (immediate && !isImmediate) {//第一次是否需要立即執(zhí)行 當(dāng)immediate和isImmediate 都為一個值時回立即執(zhí)行
                func.apply(_this, args)
                isImmediate = true//使函數(shù)下次不會立即執(zhí)行使其延遲
            } else {
                timer = setTimeout(function () {//將定時器聲明為變量timer
                    func.apply(_this, args)//如果處理函數(shù)需要用到input的this就通過這個apply從新綁定this，不綁定的話treeSearch函數(shù)this指向的是window(直接使用下面的func()就行),
                    // func()//外部傳入的函數(shù) 
                    isImmediate = true//使函數(shù)下次不會立即執(zhí)行使其延遲
                }, wait)//延遲執(zhí)行時間
            }
        }
    }
</script>
</html>

效果圖：