JS防抖节流函数的实现与使用场景

目录

• 一、什么是函数防抖
  
• 1、为什么需要函数防抖？
  
• 2、函数防抖的要点
• 3、函数防抖的实现
  
• 4、函数防抖的使用场景
  
• 二、什么是函数节流
  
• 1、函数节流的要点
  
• 2、函数节流的实现
• 3、函数节流的使用场景
  
• 总结

//HTML部分
 

    账户：

//JS部分
function debounce(fun,wait=1500){//ES6语法 wait=1500 设置参数默认值，如果没有输入wait就会使用1500
        let timeout = null
        return function(){
            if(timeout){//如果存在定时器就清空
                clearTimeout(timeout)
            }
            timeout=setTimeout(function(){
                fun()
            },wait)
        }

    }
function testUname(){
    console.log("输入结束！")
}
document.getElementById("myinput").addEventListener("input",debounce(testUname,1000))

//HTML部分
 

    账户：

//JS部分
function debounce(fun,wait=1500){
        let timeout = null
        return function(){
            console.log(this)//
            console.log(arguments)//Arguments { 0: input, … }
            if(timeout){//如果存在定时器就清空
                clearTimeout(timeout)
            }
            timeout=setTimeout(function(){
                console.log(this)//Window
                console.log(arguments)//Arguments { … }
                fun()
            },wait)
        }

    }
function testUname(){
    console.log("输入结束！")
}
document.getElementById("myinput").addEventListener("input",debounce(testUname,1000))

//JS部分
function debounce(fun,wait=1500){
            let timeout = null
            return function(){
                let _this = this
                let arg = arguments
                if(timeout){//如果存在定时器就清空
                    clearTimeout(timeout)
                }
                timeout=setTimeout(function(){
                    console.log(_this)//
                    console.log(arg)//Arguments { 0: input, … }
                    fun.apply(_this,arg)
                },wait)
            }
         
        }

//JS部分
function debounce(fun,wait=1500){
            let timeout = null
            return function(){
                if(timeout){//如果存在定时器就清空
                    clearTimeout(timeout)
                }
                timeout=setTimeout(()=>{
                    console.log(this)//
                    console.log(arguments)//Arguments { 0: input, … }
                    fun.apply(this,arguments)
                },wait)
            }
         
        }

//JS部分
function debounce(fun,wait=1000){//定时器方案
            let timer = null;//先设定一个变量
            return function(){
                if(!timer){//如果timer为null就进入
                    timer = setTimeout(function(){//然后把定时器赋值给这个变量
                        fun()//再写入需要执行的函数
                        timer = null//第一次的定时器执行完函数最后会设定变量为false，这里的 timer = null有两个作用，1、开启下一次的入口，2、清除后面的定时器
                    })

                }
            }
        }
function testUname(){
    console.log(Math.random())
}
document.getElementById("myinput").addEventListener("input",debounce(testUname))

//箭头函数写法
function debounce(fun,wait=1000){
            let timer = null
            return function(){
                if(!timer){
                    timer = setTimeout(()=>{
                        fun.apply(this,arguments)
                        timer = null
                    },wait)

                }
            }
}
//参数保存法
function debounce(fun,wait=1000){
        let timer = null
        return function(){
            let _this = this
            let arg = arguments
            if(!timer){
                timer = setTimeout(function(){
                    fun.apply(_this,arg)
                    timer = null
                },wait)

            }
        }
}