js如何监听input输入事件及使用防抖封装函数处理方法

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

这篇文章主要给大家介绍了关于js如何监听input输入事件及使用防抖封装函数处理方法的相关资料,最近有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,需要的朋友可以参考下

1.实现input框的输入监听事件：

<input id="search" /> //需要监听的dom

//js实现(介绍两种方式)
//方式一：利用input的oninput输入事件实现输入监听
let inputChange1 = document.getElementById("search")//获取inputDom
    inputChange1.oninput = function(){//监听输入事件
        console.log("监听到input输入")//输出
        let value1 = this.value//拿到输入的值
        let value2 = document.getElementById("search").value//获取值的方式二
        console.log(value1,value2)//输出
    }
//方式二：利用input的oninput输入事件实现输入监听
let inputChange2 = document.getElementById("search")//获取inputDom
    inputChange2.addEventListener("onpropertychange",function(){
         console.log("监听到input输入")//输出
        let value1 = this.value//拿到输入的值
        let value2 = document.getElementById("search").value//获取值的方式二
        console.log(value1,value2)//输出
    })

//jquery实现(介绍一种)

$("#search").bind("input propertychange",function(){
    console.log("监听到input输入")
    let value = $("#search").val()//拿到输入的值
    console.log(value)//输出
})

2.防抖函数

防抖函数的目的：为了限制函数的执行频率而出现，优化解决函数触发频率过高导致延迟及假死卡顿等bug的出现。大多用在查询和提交功能上。

设置时间内多次点击或者输入只会执行最后一次点击或者输入；

代码：

/**
     * 防抖函数的封装
     * @param func 需要防抖处理的函数
     * @param wait 等待时间 默认赋值了1秒
     * @immediate 第一次是否需要立即执行 boolean值 默认为 false
     * 
     **/
    function debounce(func, wait = 1000, immediate = false) {
        // 定义一个变量来记录上一次的定时器函数的状态
        let timer = null
        let isImmediate = false//通过改变量控制函数是否立即执行
        //返回一个函数
        return function () {
            let _this = this//获取input的this
            let args = arguments  //接收函数参数
            // 返回的变量,让函数只执行最后一次
            if (timer) {
                clearInterval(timer)   //删除上一次定时器
            }
            if (immediate && !isImmediate) {//第一次是否需要立即执行 当immediate和isImmediate 都为一个值时回立即执行
                func.apply(_this, args)
                isImmediate = true//使函数下次不会立即执行使其延迟
            } else {
                timer = setTimeout(function () {//将定时器声明为变量timer
                    func.apply(_this, args)//如果处理函数需要用到input的this就通过这个apply从新绑定this，不绑定的话treeSearch函数this指向的是window(直接使用下面的func()就行),
                    // func()//外部传入的函数 
                    isImmediate = true//使函数下次不会立即执行使其延迟
                }, wait)//延迟执行时间
            }
        }
    }

3.input输入事件和节流的结合（点击事件也是如此）

<!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
    // 需要防抖处理的函数
    const treeSearch = function () {
        // 逻辑处理
        console.log("通过绑定inputThis得到的value:", this.value);//通过绑定this可以更加方便的使用当前监听的input的属性
        let searchValue = document.getElementById("search").value//不重新绑定this就得重新通过获取监听dom的方式拿到需要的属性
        // console.log(searchValue);//不重新绑定this获取监听dom的方式拿到需要的属性方式
    }
    //oninput监听input框的输入事件
    search.oninput = debounce(treeSearch, 2000, true)
    /**
     * 防抖函数的封装
     * @param func 需要防抖处理的函数
     * @param wait 等待时间 默认赋值了1秒
     * @immediate 第一次是否需要立即执行 boolean值 默认为 false
     * 
     **/
    function debounce(func, wait = 1000, immediate = false) {
        // 定义一个变量来记录上一次的定时器函数的状态
        let timer = null
        let isImmediate = false//通过改变量控制函数是否立即执行
        //返回一个函数
        return function () {
            let _this = this//获取input的this
            let args = arguments  //接收函数参数
            // 返回的变量,让函数只执行最后一次
            if (timer) {
                clearInterval(timer)   //删除上一次定时器
            }
            if (immediate && !isImmediate) {//第一次是否需要立即执行 当immediate和isImmediate 都为一个值时回立即执行
                func.apply(_this, args)
                isImmediate = true//使函数下次不会立即执行使其延迟
            } else {
                timer = setTimeout(function () {//将定时器声明为变量timer
                    func.apply(_this, args)//如果处理函数需要用到input的this就通过这个apply从新绑定this，不绑定的话treeSearch函数this指向的是window(直接使用下面的func()就行),
                    // func()//外部传入的函数 
                    isImmediate = true//使函数下次不会立即执行使其延迟
                }, wait)//延迟执行时间
            }
        }
    }
</script>
</html>

效果图：

直接复制最下面的代码块就能看到效果了，如有错误望大佬能够指正。

总结

到此这篇关于js如何监听input输入事件及使用防抖封装函数处理方法的文章就介绍到这了,更多相关js监听input输入事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

小程序如何构建骨架屏
最近在移动端上面看到不同于菊花图的加载方式，就是这篇文章需要分享的Skeleton Screen，中文称之为"骨架屏"，下面我们来简单了解一下吧
2019-05-05
JavaScript中的类型检查
本文给大家介绍了JavaScript中的类型检查的一些知识点,整理的非常详细,推荐给大家,希望对大家学习JavaScript能够所帮助
2020-02-02
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
这篇文章主要介绍了js实现时间显示几天前、几小时前或者几分钟前的方法,实例汇总分析了时间显示格式转换的常用思路与技巧,需要的朋友可以参考下
2015-05-05
JS的拖拽属性draggable详解
这篇文章主要介绍了JS的拖拽属性draggable详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
关于JavaScript奇怪又实用的六个姿势
这篇文章主要给大家介绍了关于JavaScript奇怪又实用的六个姿势,这些技巧和建议是我平常在开发项目上会用到的,希望能让大家学到知识,需要的朋友可以参考下
2021-10-10
利用Bootstrap实现表格复选框checkbox全选
Bootstrap相信应该不用多介绍，来自 Twitter，是目前最受欢迎的前端框架。这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
2016-12-12
js操作IE浏览器弹出浏览文件夹可以返回目录路径
这篇文章主要介绍了js操作IE浏览器弹出浏览文件夹并可以返回目录路径,需要的朋友可以参考下
2014-07-07
JavaScrip数组去重操作实例小结
这篇文章主要介绍了JavaScrip数组去重操作,结合实例形式总结分析了javascript针对数组的遍历、判断、去重等相关操作技巧,需要的朋友可以参考下
2019-06-06
canvas实现图像布局填充功能
这篇文章主要为大家详细介绍了canvas实现图像布局填充功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
electron中preload.js文件的用法小结
preload.js文件在Electron应用中起着桥梁的作用,使得在保持安全的同时,渲染进程可以访问主进程的功能,保持渲染进程与主进程隔离的同时,又能使渲染进程具有访问特定Electron API的能力的方法,本文给大家分享electron中preload.js文件的用法,感兴趣的朋友一起看看吧
2024-04-04