<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="../js/jquery.js"></script>
<body>
<input type="text">
</body>
</html>
<script>
// https://www.jianshu.com/p/c8b86b09daf0 参考文档
// 函数的防抖
// let time = null; // 定义一个定时器存放的变量
// $('input').on('input',function(){
// if(time){ // 如果定时器存在,就清除定时器
// clearTimeout(time);
// }
// console.log($(this).val());
// time = setTimeout(() =>{ // 重新开启一个定时器
// fn($(this).val())
// // console.log($(this).val());
// },1000)
// // console.log($(this).val());
// })
// function fn (val){
// console.log(`我是发送请求的,请求的值为${val}`);
// }
// 函数节流
// let time = null; // 定义一个定时器的存放的变量
// $('input').on('input',function(){
// console.log($(this).val());
// if (time){ // 如果定时器存在,就不需要开启,直到上一个执行完成在开启
// return;
// }
// time = setTimeout(()=>{
// fn($(this).val())
// time = null
// },1000)
// })
$('input').on('input',throttle(fn,2000,2))
function fn () {
// console.log('dedede');
console.log($(this).val());
}
// let dom = document.querySelector('input');
// dom.oninput = debounce(fn,1000,false);
// function fn (){
// console.log(this.value);
// }
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版,2 表定时器版
*/
function throttle(func, wait, type) {
let previous = 0,timeout;
// 因为let有块级作用域
// if (type === 1) {
// let previous = 0;
// } else if (type === 2) {
// let timeout;
// }
return function () {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
} else if (type === 2) {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
// 防抖
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行,false 表非立即执行
*/
function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
</script>
防抖和节流 代码
最新推荐文章于 2024-07-20 14:49:34 发布
本文探讨了JavaScript中两种常见的函数优化技术——防抖(debounce)和节流(throttle)。通过示例代码展示了如何实现防抖函数和节流函数,并解释了它们在输入事件处理中的应用,以提高性能并减少不必要的请求发送。
摘要由CSDN通过智能技术生成