关于Js debounce（防抖）函数和throttle(节流)小结 

闭包的实际运用防抖

防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，
如果设定的时间到来之前，又一次触发了事件，就重新开始 延时。
(如果在一段时间内，又触发了该事件；就重新开始 延时)
主要运用
1==>在用户输入,进行搜索时可以使用防抖
2==>射击游戏中的mousedown、keydown事件 
3==>搜索，结束后n秒后才进行搜索；n秒内，又输入就重新计时
3==>echarts的resize函数的底层就有防抖
节流：在规定时间内，保证执行一次该函数。

将函数调用赋值给变量；此时函数已经执行了一次哈

你认为test函数有没有被执行
   <script>
        function test() {
            console.log('我是被执行了一次的');
        }
        let aa = test(); 
    </script>

已经执行了
//将函数调用赋值给变量；此时函数已经执行了一次哈

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input">
    <script>
        function debounce(func, delay) {
            console.log(1)
            let timer;
            return function (args) {
                clearInterval(timer);
                timer = setTimeout(function () {
                    // 在delay秒内执行某一个func事件;
                    func(args)
                }, delay)
            }
        }

        function inputFunction(val) {
            console.log(`你输出的结束是${val}`);
        }

        //此时的防抖函数已经被执行过一次了；在赋值的过程中；
        const debouceInput = debounce(inputFunction, 500);


        const input = document.getElementById("input");
        input.addEventListener('keyup', function (e) {
            debouceInput(e.target.value)
        })
    </script>
</body>

</html>

我的第二个防抖函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" >
    <input type="submit" id="input"  value="按钮">
    <script>
        const btn = document.getElementById("input");
        btn.addEventListener('click', debounce(submit,2000),false)
        function submit(){
            console.log('点击了')
        }
        function debounce(func,timer) {
            var t=null;
            return function(){
                var fristTimer=!t;
                if(t){
                    clearTimeout(t)
                }
                if(fristTimer){
                    func.apply(this,arguments)
                }
                t=setTimeout(()=>{
                   t=null;
                },timer)
            }
        }
    </script>
</body>
</html>

这两个防抖函数的说明

第一个防抖函数的缺点是第一次进入该函数。
就会被执行
显然这样是不好的
所以我写了第二个防抖函数。就不会已进入就会被执行了

在vue3中防抖函数的使用

在src下创建utils.js文件

代码如下
export function debounce(func,timer) {
    var t=null;
    return function(){
        var fristTimer=!t;
        if(t){
            clearTimeout(t)
        }
        if(fristTimer){
            func.apply(this,arguments)
        }
        t=setTimeout(()=>{
            t=null;
        },timer)
    }
}

在某一个文件中使用
<template>
  <div>
     <button @click="handerClick">按钮</button>
  </div>
</template>
<script>
import { debounce } from "@/utils.js"
export default {
  setup () {
    const handerClick=debounce(()=>{
      // 你需要做的业务逻辑
      console.log('防抖在2s内触发');
    },2000)
    return { 
      handerClick
    }
  }
}
</script>

  节流：
    当持续触发事件的时候，
    保证在一段时间内，只调用一次事件处理函数；
    点击王者荣耀回城的时候，就需要使用节流哈~

    典型就是：
    鼠标不断点击触发；规定在n秒内多次点击只有一次生效

节流函数在vue3中的使用

utils.js文件下的内容

// 节流函数的使用
export function throttle(func, delay) {
    var begin = 0;
    return function () {
        var cur = new Date().getTime();
        if (cur-begin>delay) {
            func.apply(this, arguments)
            begin=cur
        }
    }
}

vue3 需要的页面使用
<template>
  <div>
     <button @click="handerClick3">节流函数的使用</button>
  </div>
</template>
<script>
import { throttle } from "@/utils.js"
export default {
  setup () {
    const handerClick3=throttle(()=>{
      // 你需要做的业务逻辑
      console.log('防抖在2s内触发kkkkkkkkk');
    },3000)
    return { 
      handerClick3,
    }
  }
}
</script>
posted @ 2020-10-09 21:58  南风晚来晚相识  阅读(255)  评论(0)  编辑  收藏  举报