什么是防抖&节流?如何在react项目中使用防抖节流?

·  阅读 270

防抖

在n秒后执行,如果在n秒内触发,n就会重新计算,

/*
* fn [function] 需要防抖的函数
* wait [number] 毫秒,防抖期限值
*/
function debounce(fn, wait) {
    var timeout = null;
    return function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    };
}
复制代码

在React项目中使用:

src/@utils/debounce.js

/*
* fn [function] 需要防抖的函数
* wait [number] 毫秒,防抖期限值
*/
export const debounce = (fn, wait) => {
    var timeout = null;
    return function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, wait);
    };
}
复制代码

在需要使用防抖的组件类

import {debounce} from "../../@utils/debounce"

scroll = debounce((e) => {
    //...
}, 500)

<div onScroll={(e) => { this.scroll(e) }}>
复制代码

节流

在n秒内只执行一次,

/*
* fn [function] 需要防抖的函数
* wait [number] 毫秒,防抖期限值
*/
function throttle(fn, wait) {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, wait);
    };
}
复制代码

在React项目中使用:

src /@utils/throttle.js

/*
* fn [function] 需要防抖的函数
* wait [number] 毫秒,防抖期限值
*/
export const throttle = (fn, wait) => {
    let canRun = true;
    return function () {
        if (!canRun) return;
        canRun = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, wait);
    };
}
复制代码

在需要使用防抖的组件类

import { throttle } from "../../@utils/throttle"

scroll = throttle((e) => {
    //...
}, 500)

< div onScroll = {(e) => { this.scroll(e) }}>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改