**防抖和节流的实现代码**
时间: 2023-11-13 19:05:37 浏览: 42
防抖函数的实现代码如下:
```javascript
function debounce(fn, wait, immediate) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
if (immediate && !timer) {
fn.call(this, args);
}
timer = setTimeout(() => {
fn.call(this, args);
}, wait);
};
}
```
节流函数的实现代码如下:
```javascript
function throttle(fn, wait) {
let timer = null;
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, wait);
}
};
}
```
相关问题
防抖和节流代码
防抖和节流是前端开发中常用的优化技术,防抖可以防止频繁触发事件,节流可以控制事件的触发频率。下面是防抖和节流的代码实现:
防抖:
```javascript
function debounce(fn, delay) {
let timer = null;
return function () {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
```
使用示例:
```javascript
function doSomething() {
console.log("doing something...");
}
const debouncedFn = debounce(doSomething, 500);
window.addEventListener("scroll", debouncedFn);
```
上面的代码中,`doSomething`函数会在滚动事件触发时被执行,但是使用了防抖函数`debounce`包装后,只有当停止滚动500毫秒后才会真正执行`doSomething`函数,避免了频繁触发事件。
节流:
```javascript
function throttle(fn, delay) {
let lastTime = 0;
return function () {
const context = this;
const args = arguments;
const now = new Date().getTime();
if (now - lastTime >= delay) {
fn.apply(context, args);
lastTime = now;
}
};
}
```
使用示例:
```javascript
function doSomething() {
console.log("doing something...");
}
const throttledFn = throttle(doSomething, 500);
window.addEventListener("scroll", throttledFn);
```
上面的代码中,`doSomething`函数会在滚动事件触发时被执行,但是使用了节流函数`throttle`包装后,每隔500毫秒才会执行一次`doSomething`函数,控制了事件的触发频率。
js防抖和节流的实现
JS中的防抖函数和节流函数是常用的函数优化方法,可以有效控制函数的执行频率和执行时间间隔。
防抖函数的实现可以使用闭包和定时器来实现。通过在函数执行前先清除之前的定时器,然后设置一个新的定时器来延迟函数的执行。如果在指定的时间内再次触发函数,则清除之前的定时器重新设置新的定时器,以此来达到延迟函数执行的效果。下面是一个防抖函数的示例代码:
```javascript
function debounce(fn, delay) {
var timer = null;
return function () {
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn();
}, delay);
}
}
```
节流函数的实现可以使用定时器和时间戳来实现。在函数的执行过程中,通过判断当前的时间戳与上次执行的时间戳的差值来控制函数的执行频率。如果距离上次执行的时间超过指定的时间间隔,则执行函数,并更新上次执行的时间戳。下面是一个节流函数的示例代码:
```javascript
function throttle(fn, delay) {
var lastTime = 0;
return function () {
var currentTime = Date.now();
if (currentTime - lastTime >= delay) {
fn();
lastTime = currentTime;
}
}
}
```
防抖函数适用于在连续触发事件时,只在最后一次触发事件后执行一次函数,常用于输入框的输入事件等场景。节流函数适用于在连续触发事件时,按照指定的时间间隔执行函数,常用于滚动事件、窗口大小改变事件等场景。
以上是防抖函数和节流函数的简单实现和应用场景的介绍,希望对您有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [JavaScript 防抖和节流的实现](https://blog.csdn.net/weixin_43853746/article/details/122654312)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [JS函数节流和防抖之间的区分和实现详解](https://download.csdn.net/download/weixin_38622962/12947757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)