当前位置：网站首页>防抖和节流

防抖和节流

2022-07-19 05:06:00 【龙眸】

一、防抖

1、什么是防抖？
防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
2、防抖的应用场景
·用户在输入框中连续输入一串字符串，可以通过防抖策略，只在输入完成后，才能执行查询的请求，这样可以有效减少请求次数，节约请求资源。
3、防抖代码案例
详看上一篇文章，淘宝搜索框案例淘宝搜索框案例

二、节流

1、什么是节流？
节流策略（throttle）,顾名思义，可以减少一段时间内事件的触发频率
2、节流的应用场景？
①鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
②懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费CPU资源。
3、节流阀的概念：
节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作；
当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作；
每次执行操作完，必须先判断节流阀是否为空。
4、节流代码案例
鼠标跟随效果代码如下：

<!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>
    <script src="./lib/jquery.js"></script>
    <style> html, body {
      margin: 0; padding: 0; overflow: hidden; } #angel {
      position: absolute; } </style>
</head>

<body>
    <img src="./angel.gif" alt="" id="angel">
    <script> $(function() {
      // 获取图片元素 var angel = $('#angel') // 1.预定义一个timer节流阀 var timer = null // 监听文档的mousemove事件 $(document).on('mousemove', function(e) {
      // 3.判断节流阀是否为空，如果不为空，则距离上次执行间隔不足16毫秒 if (timer) {
      return } timer = setTimeout(function() {
      // 设置图片的位置 $('#angel').css('left', e.pageX + 'px').css('top', e.pageY + 'px') // 2.当设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器 console.log('ok'); timer = null }, 16) }) }) </script>
</body>

</html>