防抖与节流

2020-10-19 14:38:42 浏览数 (1)

防抖

防抖:多次触发某个函数,以最后一次函数的执行为准。

也就是说给定了一个时间n,如果在n毫秒内重复执行某个函数那么将不会执行,如果n毫秒内不再触发这个函数,那么将执行该函数。表现的效果是如果一直触发函数,那么只有最后一次才会执行

简单实现:

代码语言:javascript复制
function debounce(func, wait) {
    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

简单使用:

代码语言:javascript复制
var fn = debounce(function (){
    console.log("函数执行了");
},500);
fn();// 第一次 并不会执行
fn();// 第二次 并不会执行
fn();// 第三次 由于500毫秒后没有再次执行 所以会在500毫秒后打印"函数执行了"

防抖适用场景:多次重复的操作以最后一个为准的。就比如列表页有一个查询按钮,往往我们多次查询的结果都是以最后一次的结果为准,这里就可以用防抖。

节流

节流:多次触发某个函数,一段时间内只执行一次。

也就是说给定了一个时间n,如果在n毫秒内该函数多次调用那么会忽略这些调用,等n毫秒后会执行该函数。表现的效果是如果一直触发函数,那么每隔n毫秒就会执行一次函数

简单实现:

代码语言:javascript复制
function throttle(func, wait) {
    var timeout = null;

    return function() {
        var context = this;
        var args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

节流适用场景:将密集型操作,转换为相对松散型的操作,以减小计算量。就比如onmousemoveonresize事件的处理等。

lodash库已经对防抖和节流做了实现,我们可以直接使用。

0 人点赞