争怎路由网/网站教程/内容

Javascript中函数节流与防抖的完成(附代码)

网站教程2024-05-30 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于Javascript中函数节流与防抖的实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

函数节流(throttle)

名词解释

函数节流(throttle):连续执行函数,每隔一定时间执行函数

使用场景

鼠标移动,mousemove 事件
DOM 元素动态定位,window对象的resize和scroll 事件
等等...

函数节流(throttle)简单实现

    function throttle(fn, delay) {
        var last; // 上次执行的时间
        var timer; // 定时器
        delay (专业提供视频软件下载)

(专业提供视频软件下载)

(delay = 250); // 默认间隔为250ms return function() { var context = this; var args = arguments; var now = +new Date(); // 现在的时间 if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔 clearTimeout(timer); // 清除定时器 timer = setTimeout(function() { // delay时间后,执行函数 last = now; fn.apply(context, args); }, delay); } else { // 当前距离上次执行的时间大于等于设置的时间,直接执行函数 last = now; fn.apply(context, args); } }; }

函数防抖(debounce)

名词解释

函数防抖(debounce):空闲时间必须大于或等于一定值的时候,才会执行调用方法

使用场景

文本输入keydown 事件
等等...

函数防抖(debounce)简单实现

    function debounce(fn, delay) {
        var timer; // 定时器
        delay (专业提供视频软件下载)

(专业提供视频软件下载)

(delay = 250); // 默认空闲时间250ms return function() { var context = this; var args = arguments; clearTimeout(timer); // 清除定时器 timer = setTimeout(function() { // delay时间后,执行函数 fn.apply(context, args); }, delay); }; }

以上就是Javascript中函数节流与防抖的实现(附代码)的详细内容,更多请关注php中文网其它相关文章!

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:Javascript中函数节流与防抖的完成(附代码)
    相关阅读