【学习】防抖和节流

最新推荐文章于 2024-09-12 23:13:35 发布

刘双狗

最新推荐文章于 2024-09-12 23:13:35 发布

阅读量130

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_33218955/article/details/99644619

版权

学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

参考博客

https://blog.csdn.net/github_34708151/article/details/95165589

https://www.cnblogs.com/smallpen/p/10289050.html

https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/5

<!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>

<body>

<div>

请输入<input type="text" id ="input" style="border:1px solid #ccc">

</div>

<script>

// 防抖防抖就是在出发后的一段时间内执行一次，例如：在进行搜索的时候，当用户停止输入后调用方法，节约请求资源

// 由此可以看出来，当我们重新频繁的输入后，并不会立即调用方法，只有在经过指定的间隔内没有输入的情况下才会调用函数方法；

// function writeWord (value) {

// console.log(value)

// }

// function deShake (fun,delay) {

// let timeFlag;

// return function (args) {

// var that = this

// clearTimeout(timeFlag);

// timeFlag = setTimeout (function () {

// fun.call(that,args)

// },delay)

// }

// }

// const deShakeInput = deShake(writeWord,1000)

// const inputAttribute = document.getElementById('input')

// inputAttribute.addEventListener('keyup',function(e){

// deShakeInput(e.target.value)

// })

//节流就是在频繁触发某个事件的情况下，每隔一段时间请求一次，类似打游戏的时候长按某个按键，动作是有规律的在间隔时间触发一次

function writeText(value) {

console.log(value)

}

function throttle (fn,delay) {

let canRun = true;

return function (arg) {

var that = this

if (!canRun) return;

canRun = false;

setTimeout (function () {

fn.call(that, arg);

canRun = true;

},delay)

}

}

const throttleInput = throttle(writeText,1000)

const inputId = document.getElementById('input')

inputId.addEventListener('keyup',function(e) {

throttleInput(e.target.value)

})

</script>

</body>

</html>