当前位置：首页 > news >正文

Js — 节流及底层实现

news 2024/11/15 17:36:38

节流：单位时间内，频繁触发事件，只执行一次

节流是频繁触发只执行首次；防抖是频繁触发只执行最后一次

节流实现方式：

lodash提供的节流函数_.throttle(func,[wait=0],[options=])

在wait秒内最多执行func一次

也就是说“在wait秒内不管触发多少次，都只调一次func”

定时器setTimeout

目标：鼠标在盒子上移动，不管移动多少次，每隔500ms才+1

_.throttle函数

<!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><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head><body><div class="box"></div><script src="lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1  // 鼠标移动函数function mouseMove() {box.innerHTML = i++}box.addEventListener('mousemove',_.throttle(mouseMove,3000))</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><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head><body><div class="box"></div><script src="lodash.min.js"></script><script>const box = document.querySelector('.box')let i = 1  // 鼠标移动函数function mouseMove() {box.innerHTML = i++}function throttle(fn,t){let timer = nullreturn function(){if(!timer){timer = setTimeout(function(){fn()//清空定时器timer=null},t)}}}//return个匿名函数，这样才能多次执行；否则是调用的话，它只会执行一次box.addEventListener('mousemove',throttle(mouseMove,3000))</script></body></html>