函数防抖-摩杜云开发者社区

<!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 type="text" class="text">

    <script>
 
    // //获取元素
    // var int = document.querySelector('.text')
    // //打印value下面的值，但是会造成一个问题，当输入一个字，就会打印一个字，如果想要实现只打印最后的value值，如下
    // int.addEventListener('input',function(){
    //     console.log(this.value)
    // })

/* 
为了解决上述问题，使用下面方法，只打印最后一个value值
多行注释快捷键:shift+alt+a
逻辑：
注册事件，判断当前input框被操作后走回调函数，回调函数在通过函数进行打印
回调函数两个实参，第一个值，打印value值；第二个值，等待的时间
函数两个形参来自回调函数的两个实参
trimid =走该函数时，清空trimid，在将新的value给trimid（这样每次都是获取最后一次）

让函数调用this
获取函数所有参数

什么是函数防抖：比如：输入一个字，他会一直记录！会影响性能，所以使用以上方法解决函数防抖
 */
     function wsx(fn,fi){
        var trimid;
        return function(){
            clearTimeout(trimid)
            //调用外面的this = input
            var curthis = this;
            //获取所有函数的参数
            var sli = Array.prototype.slice.call(arguments)
            
            trimid = setTimeout(function(){
                //让fn指向这个this
                fn.call(curthis,sli)
            },fi)
        }
     }
        
        var hai = wsx(function(e){
            console.log(e,this.value+'测试')
        },1000)

        //获取到的元素
       var int = document.querySelector('.text');
       int.addEventListener('input',hai)
    </script>
</body>
</html>

<!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 type="text" class="text">

<script>
 
// //获取元素
// var int = document.querySelector('.text')
// //打印value下面的值，但是会造成一个问题，当输入一个字，就会打印一个字，如果想要实现只打印最后的value值，如下
// int.addEventListener('input',function(){
//     console.log(this.value)
// })

/*

为了解决上述问题，使用下面方法，只打印最后一个value值

多行注释快捷键:shift+alt+a

逻辑：

注册事件，判断当前input框被操作后走回调函数，回调函数在通过函数进行打印

回调函数两个实参，第一个值，打印value值；第二个值，等待的时间

函数两个形参来自回调函数的两个实参

trimid =走该函数时，清空trimid，在将新的value给trimid（这样每次都是获取最后一次）

让函数调用this

获取函数所有参数

什么是函数防抖：比如：输入一个字，他会一直记录！会影响性能，所以使用以上方法解决函数防抖

*/
function wsx(fn,fi){
var trimid;
return function(){
clearTimeout(trimid)
//调用外面的this = input
var curthis = this;
//获取所有函数的参数
var sli = Array.prototype.slice.call(arguments)
            
trimid = setTimeout(function(){
//让fn指向这个this
fn.call(curthis,sli)
fi)
        }
     }
        
var hai = wsx(function(e){
console.log(e,this.value+'测试')
1000)

//获取到的元素
var int = document.querySelector('.text');
int.addEventListener('input',hai)
</script>
</body>
</html>