<!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> 标签:function,防抖,函数,打印,trimid,value,var From: https://www.cnblogs.com/wsx123/p/17312117.html