什么是防抖和节流？如何实现防抖和节流？根据鼠标移动事件获取当前鼠标的坐标值，实现“普通鼠标移动”、“防抖效果”、“节流效果”。

最新推荐文章于 2024-06-04 15:13:52 发布

云边有个--小卖部

最新推荐文章于 2024-06-04 15:13:52 发布

阅读量969

点赞数 3

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/weixin_62115642/article/details/126269549

版权

一、防抖（debounce）

1、什么是防抖：

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

2、原理：

原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

3、常用场景：

1、实时搜索框（根据输入框的数据发送ajax请求）（keyup）
2、文本输入的验证（连续发送文字发送ajax请求验证，但只验证最后一次输入的内容）（input）
3、判断scroll是否滚动到底部（scroll）
4、按钮提交事件

 function debounce(callback, delay) {
   var t = null;
   return function () {
     clearTimeout(t);
     t = setTimeout(callback, delay);
   };
 }

二、节流（throttle）

1、什么是节流：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时，重新触发定时器。

2、原理：

在第一次触发了setTimeout后，先把阀门关闭（使用一个Boolean变量），等执行完后再把阀门打开

3、常用场景：

1、窗口调整（resize）
2、页面滚动请求（scroll）
3、DOM元素的拖拽功能实现（mousemove）
4、类似电商抢购商品时的疯狂点击抢购按钮（mousedown）

function throttle(fn, wait) {
  let timer = null;
   return function (...args) {
     if (!timer) {
       timer = setTimeout(() => {
         fn.apply(this, args);
         timer = null;
       }, wait);
     }
   };
 }

三、根据鼠标移动事件获取当前鼠标的坐标值，实现“普通鼠标移动”、“防抖效果”、“节流效果”。

<!DOCTYPE html>
<html lang="zh-CN">

<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>
</head>

<body>
    <p id="pt">鼠标在页面中的位置 普通鼠标移动：</p>
    <span>防抖3秒</span>
    <p id="fd">鼠标在页面中的位置 防抖鼠标移动：</p>
    <span>节流3秒</span>
    <p id="jl">鼠标在页面中的位置 节流鼠标移动：</p>
</body>
<script>
    var pt = document.querySelector('#pt')
    var fd = document.querySelector('#fd')
    var jl = document.querySelector('#jl')
    // 预解析变量 清除倒计时会用到
    var fdTime = null
    var jlTime = null;
    window.onmousemove = function (e) {
        // console.log(e.pageX, e.pageY);
        // 普通
        // pt.innerHTML = "鼠标在页面中的位置 普通鼠标移动：X轴位置" + e.pageX + ";Y轴位置" + e.pageY;
        // 防抖
        // 每次触发清除倒计时
        clearTimeout(fdTime);
        // 重新开始倒计时
        fdTime = setTimeout(function () {
            // console.log(1)
            fd.innerHTML = "鼠标在页面中的位置 防抖鼠标移动：X轴位置" + e.pageX + ";Y轴位置" + e.pageY;
        }, 3000)
        // 节流
        if (jlTime) {
            return
        } else {
            jlTime = setTimeout(function () {
                jl.innerHTML = "鼠标在页面中的位置 节流鼠标移动：X轴位置" + e.pageX + ";Y轴位置" + e.pageY;
                jlTime = null
            }, 3000)

        }
    }
</script>

</html>

云边有个--小卖部

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是防抖和节流？如何实现防抖和节流？根据鼠标移动事件获取当前鼠标的坐标值，实现“普通鼠标移动”、“防抖效果”、“节流效果”。

什么是防抖和节流？如何实现防抖和节流？根据鼠标移动事件获取当前鼠标的坐标值，实现“普通鼠标移动”、“防抖效果”、“节流效果”。
复制链接

扫一扫