函数防抖
Posted 编码1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了函数防抖相关的知识，希望对你有一定的参考价值。
<!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>
函数的防抖和节流
防抖
所谓防抖，就是指触发事件后在n秒内函数只能触发一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
/* 防抖函数 @param Function func 要执行的函数 @param Number wait 要等待的时间 ms */ function debounce(func, wait) let timer = null; return function () let context = this; let args = arguments; timer && clearTimeout(timer); timer = setTimeout(() => func.apply(context, args) , wait);
// 使用方法
document.getElementById(‘btn‘).onclick = debounce(function ()
this.innerHTML = ‘按钮‘ + num++;
, 200);
节流
所谓节流，就是指连续触发事件，但是在n秒中只执行一次函数。
/* 节流函数 @param Function func 要执行的函数 @param Number wait 要等待的时间 ms */ function throttle(func, wait) // 记录上一次函数触发的时间 let lastTime = 0; return function () let nowTime = Date.now(); let context = this; let args = arguments; if (nowTime - lastTime > wait) // 修正this指向 func.apply(context, args); lastTime = nowTime; ;
// 使用方法 document.onmousemove = throttle(function () console.log(‘函数触发了？‘) , 200);
以上是关于函数防抖的主要内容，如果未能解决你的问题，请参考以下文章