JS防抖和节流

简介: JS防抖和节流

一、防抖

(1)概念:

   当持续触发事件,一定时间内没有再触发事件,事件处理函数只会执行一次,如果设定的时间到来之前又一次触发了事件,就重新开始延时。

比如点击按钮2s后调用函数,在第1.5s时又点了,则会重新开始计时,又要等2s
(2)实际应用:

使用echarts时,改变浏览器宽度的时候,希望重新渲染echarts的图像,可以用此函数提升性能(虽然echarts里有自带的resize函数) 
典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时,解决搜索的bug
<input type="text">
<script>
    let input = document.querySelector('input')
    // 防抖函数
    function debounce(delay,callback) {
        let timer;
        return function (value) {
            clearTimeout(timer);
            // 需要清除setTimeout 
            // timer变量需要一直保存在内存中(闭包)
            // 不想打印之前已经输入的结果,那就要清除以前触发的定时器
            timer = setTimeout(function () {
                // console.log(value); // 希望结果在外面输出
                callback(value)
            }, delay)
        }
    }
    function fn(value){
        console.log(value);
    }
    // 需求:键盘抬起不再输入的1s后,输入框的结果只出现一次
    let debounceFunc = debounce(1000,fn)
    input.addEventListener('keyup', function (e) {
        debounceFunc(e.target.value)
    })
</script>

二、节流

(1)概念:

    当持续触发事件的时候,保证一段时间内,只触发一次事件处理函数 

(2)实际应用:
表单的提交
典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只有一次生效

<button id="button">点击</button>
<script>
    function throttle(func, wait) {
        let timerOut;
        // 相当于是在办理业务
        return function () {
            if (!timerOut) {
                // 如果timerOut有值的话就不执行
                timerOut = setTimeout(function () {
                    func();
                    // 工作人员办理完了之后,后面的不办理了
                    timerOut = null;
                }, wait)
            }
        }
    }
    function handle(){
        console.log(Math.random());
    }
    let btn = document.querySelector('#button')
    btn.onclick = throttle(handle,2000)
</script>
相关文章
|
12天前
|
JavaScript
JS封装节流函数
JS封装节流函数
23 0
|
12天前
|
JavaScript
JS中防抖和节流的区别是什么
JS中防抖和节流的区别是什么
25 0
|
12天前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
12 1
|
12天前
|
JavaScript 前端开发 UED
js的节流
js的节流
15 0
|
12天前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
23 0
|
12天前
|
JavaScript
|
12天前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
55 3
|
12天前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
41 0
|
12天前
|
JavaScript 前端开发
js的节流和防抖
js的节流和防抖
19 0
|
12天前
|
JavaScript 前端开发 UED