Js — 防抖及底层实现

防抖：单位时间内，频繁触发事件，只执行最后一次

防抖实现方式：

lodash提供的防抖函数_.debounce(func,[wait=0],[option=])

延迟wait毫秒后调用func方法

定时器setTimeout

目标：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1

_.debounce函数

<!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++}//语法：_.debounce(fun,时间)box.addEventListener('mousemove', _.debounce(mouseMove, 500))</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++}// box.addEventListener('mousemove', _.debounce(mouseMove, 500))function debounce(fn,t){//1.let timer//return 返回一个匿名函数return function(){//2.3.4if(timer) clearTimeout(timer)timer = setTimeout(function(){//在定时器里执行要执行的函数mouseMove()fn()}, t)}}// 为什么返回一个匿名函数?// debounce(mouseMove, 500)单写这个是函数调用；只执行一次// debounce(mouseMove, 500) 接收 function(){2，3，4}// 就相当于box.addEventListener('mousemove',function(){2，3，4})box.addEventListener('mousemove',debounce(mouseMove, 500))</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/10347.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！