防抖和节流

最新推荐文章于 2025-05-29 14:37:45 发布

大春也有人抢?

最新推荐文章于 2025-05-29 14:37:45 发布

阅读量103

点赞数 1

文章标签： css3 html5 前端

本文链接：https://blog.youkuaiyun.com/m0_60823684/article/details/121143889

版权

一.防抖

1.什么是防抖:

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

王者荣耀的回城机制就运用到了防抖技术,在npc回城时,如果再点击一次回城按钮,就会重新计算回城时间.

2.防抖的应用场景:

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；

3.实现输入框的防抖

a. 防抖动的 timer

b. 定义防抖的函数，函数里面定义一个延时器，在演示器里面调用发起 JSONP 的请求

c. 在触发 keyup 事件时，立即清空 timer ，然后调用防抖的函数

var timer = null // 1. 防抖动的 timer 
    function debounceSearch(keywords) { // 2. 定义防抖的函数 
    timer = setTimeout(function() { 
    // 发起 JSONP 请求 
    getSuggestList(keywords) 
}, 500) }

$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer             
    clearTimeout(timer) // ...省略其他代码 
    debounceSearch(keywords) 
})

二.节流

1.什么是节流:

顾名思义，可以减少一段时间内事件的触发频率。

如上图npc所示,在你点击攻击按钮时,攻击间隔时间(可以通过购买装备和提升npc等级来加快攻击间隔时间)是固定的,在你点击了攻击按钮后的攻击间隔时间内,无论你点的多快,点了再多此攻击按钮,在这段攻击间隔时间内它都不会再次触发攻击事件,直到这次攻击间隔时间走完.

2.节流案例-鼠标跟随效果

(1) UI效果

(2) 渲染 UI 结构并美化样式

<!-- UI 结构 --> 
<img src="./assets/angel.gif" alt="" id="angel" /> 
/* CSS 样式 */ 
html, body { 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 

#angel { 
position: absolute; 
}

(3)不使用节流时实现鼠标跟随效果

a. 获取图片元素

b. 注册 mousemove 事件

c. 设置图片的位置

$(function() { 
// 获取图片元素 
var angel = $('#angel') 
// 监听文档的 mousemove 事件 
$(document).on('mousemove', function(e) { 
// 设置图片的位置 
$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px') 
}) 
})

(4)使用节流优化鼠标跟随效果

a. 预定义一个 timer 节流阀

b. 当设置了鼠标跟随效果后，清空 timer 节流阀 ，方便下次开启延时器

c. 执行事件的时候判断 节流阀 是否为空，如果不为空，则证明距离上次执行间隔不足 16 毫秒

$(function() { 
    var angel = $('#angel') 
    var timer = null // 1.预定义一个 timer 节流阀 
    $(document).on('mousemove', function(e) { 
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足 16毫秒
    timer = setTimeout(function() { 
    $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px') 
    timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器 
    }, 16) 
    }) 
})