javascript函数防抖

SmallBoyO 发布于2019-08-26 11:52 / 1474人阅读

摘要：而此时是作为定时器的一个参数，指向，需要更正指向。修改防抖函数立即执行防抖函数中使用了定时器，事件触发后会延迟一定时间才调用事件函数，有时我们希望触发事件可以立即执行，然后需要秒后才能重新触发执行。

函数防抖 (debounce)

函数防抖是频繁发生的情况下，当有足够的空闲时间，才会执行代码一次，是优化高频率执行代码的一种手段。实际开发中会遇到频发触发事件的情况，比如 resize, scroll, mousemove 事件。

原理

事件触发 n 秒后执行，如果在这 n 秒内再次触发，则以新的事件时间为准，n 秒后执行。无论触发多少次，都要等到最后一次触发 n 秒后才执行。

实现

用 mousemove举例，当鼠标移入时，在 div 内显示事件函数执行的次数。防抖的简单实现如下：

let count = 0;
let oDiv = document.querySelector("#container");

//防抖函数
function debounce(fn, delay) {
    let timer;
    
    return function() {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
    }
}

//事件函数
function eventFn() {
    oDiv.innerHTML = ++count;
}

oDiv.onmousemove = debounce(eventFn, 1000);

this指向

正常情况下，在事件函数中使用 this 指向该事件绑定的元素。而此时 eventFn 是作为定时器的一个参数，this 指向 window ，需要更正 this 指向。

function debounce(fn, delay) {
    let timer;
    
    return function() {
        let _this = this;
        
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(_this);
        }, delay);
    }
}

event对象

一般情况下，事件函数 eventFn 的第一个参数为 event 对象，但此时，值为 undefined。修改防抖函数：

function debounce(fn, delay) {
    let timer;
    
    return function() {
        let _this = this;
        let opt = arguments;
        
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(_this, arguments);
        }, delay);
    }
}

立即执行

防抖函数中使用了定时器，事件触发后会延迟一定时间才调用事件函数，有时我们希望触发事件可以立即执行，然后需要 n 秒后才能重新触发执行。我们通过传入第三个参数，判断是否需要立即执行。

function debounce(fn, delay, immediate) {
    let timer;
    
    return function() {
        let _this = this;
        let opt = arguments;
        
        timer && clearTimeout(timer);
        if(immediate) {
            let call = !timer;
            timer = setTimeout(function() {
                timer = false;
            }, delay);
            
            call && fn.apply(_this, opt);
        } else {
            timer = setTimeout(function() {
                 fn.apply(_this, opt);
             }, delay);
        }    }
}

云服务器 GPU云服务器 javascript 函数 javascript函数 JavaScript函数编程 javascript函数对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107721.html

说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle)

摘要：基础防抖我们现在写一个最基础的防抖处理标记事件也做如下改写现在试一下，我们会发现只有我们停止滚动秒钟的时候，控制台才会打印出一行随机数。为何要防抖和节流有时候会在项目开发中频繁地触发一些事件,如 resize、 scroll、 keyup、 keydown等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台...

yanwei 2019-08-23 18:10 评论0 收藏0
js 防抖节流 JavaScript

摘要：此时需要采用防抖和节流的方式来减少调用频率，同时不影响原来效果。函数防抖当持续触发事件时，一段时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前就触发了事件，延时重新开始。 js 防抖节流 JavaScript 实际工作中，通过监听某些事件，如scroll事件检测滚动位置，根据滚动位置显示返回顶部按钮；如resize事件，对某些自适应页面调整DOM的渲染；如ke...

int64 2019-08-23 14:48 评论0 收藏0
JavaScript防抖和节流

摘要：概念函数防抖和函数节流，两者都是优化高频率执行代码的一种手段。防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流指定时间间隔内只会执行一次任务一定时间内方法只跑一次。概念函数防抖和函数节流，两者都是优化高频率执行js代码的一种手段。防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。节流：指定时间间隔内只会执行一次任...

DevWiki 2019-08-23 17:09 评论0 收藏0
JavaScript：函数防抖与函数节流

摘要：函数防抖简单实现模拟请求获取函数的作用域和变量清除定时器节流名词解释连续执行函数，每隔一定时间执行函数。效果函数防抖是某一段时间内只执行一次函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。防抖（debounce）名词解释：在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。使用场景：以百度输入框例，比如你要查询...

elina 2019-08-23 15:26 评论0 收藏0
JavaScript之节流与防抖

摘要：个人博客原文地址背景我们在开发的过程中会经常使用如等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。个人博客原文地址背景我们在开发的过程中会经常使用如scroll、resize、touchmove等事件，如果正常绑定事件处理函数的话，有可能在很短的时间内多次连续触发事件，十分影响性能。因此针对这类事件要进行节流或者防抖处理节流节流的意思...

wayneli 2019-08-23 10:33 评论0 收藏0