js的节流和防抖

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41134409/article/details/85089901

在项目开发过程中,我们通常会遇到这种需求,需要对某一行为进行js方法监听并且做出相应的业务处理,但是该行为变化的频率有可能是非常的频繁的,比如滚动条滚动、input框数值变化等。

我们都知道一个web项目性能很重要,性能好的项目能给用户留下好的印象,否则用户就会很自然的放弃这个应用,到那时我们的开发出来的东西,已经没有什么很大的价值了,因为不被认可。

好了bb完一堆废话,我们进入正题。今天要说的就是通过js的节流和防抖,来进行我们项目的一个性能优化。下面我们用input的输入作为一个栗子:
需求:有一个input搜索,此时展示数据必须根据用户输入的值,而动态展示。
做法:监听input的输入事件,然后实时进行后台接口请求,然后把数据更新。
分析:这样做可以实现需求,但是这样的开销是很大的,我们看下下面的效果图你就会明白,在这里插入图片描述
通过上图,我们可以清楚的发现问题,每当我们输入一个字,就会进行业务处理,产生没必要的开销,所以我们有请主角登场。

主角一防抖,作用就是让在事件触发的过程中,不去业务处理,而是等该事件结束时,则马上进行业务处理,这里事件结束后的多长时间去执行业务代码,是由我们自己设定的,也就是以下的参数wait,单位毫秒。功能代码如下:

let timer = null;
const debounce = (fn,wait)=> {    //fn表示业务处理方法,wait表示事件结束后多长时间执行fn
	timer = setTimeout(() => {
		fn();
    },wait)
}

例子完整代码:

	const inp = document.querySelector('input');
    inp.oninput = function() {
        debounce (getData,1000);  
    }

    const getData = () => {
        console.log('接口调用'+inp.value);
    }

    //防抖
    let timer = null;
    const debounce = (fn,wait)=> {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn();
        },wait)
    }

效果图:
在这里插入图片描述

主角二:节流,节流和防抖不同,防抖是事件结束后一定的时间后才会执行业务代码。节流则是事件进行的过程中按一定的频率执行业务代码,这里说的频率也是我们自己设定,以下参数wait。功能代码:

    let timer = null;
    const throttle = (fn,wait) => {     //fn业务代码函数,wait为频率
        if(!timer) {
            timer = setTimeout(() => {
                fn();
                timer = null;
            },wait)
        }
    }

例子完整代码:

	const inp = document.querySelector('input');
    inp.oninput = function() {
        throttle(getData,1000)
    }

    const getData = () => {
        console.log('接口调用'+inp.value);
    }
    //节流
    let timer = null;
    const throttle = (fn,wait) => {
        if(!timer) {
            timer = setTimeout(() => {
                fn();
                timer = null;
            },wait)
        }
    }

效果图:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页