JavaScript 防抖和节流

防抖和节流

防抖

 准备工作 获取id值再改id上添加监听点击事件

难点一 要在一个函数调用另外的一个函数return 里面

第二clearTimeout 和setTimeout 由于要清除时间所以定义变量的时候要将变量写在return上面，

第三在里面写如apply将return里面的函数的this和arguments传递到外面，这样函数的submit就和fn()对应起来

第四难点submit的this指向的是 input而setTimeout的this指向的是window是由于回调函数的缘故所以要在调用setTimeout前保持this然后apply到submit上

<input type="submit" id="input" value="提交" />
 

var btn = document.getElementById("input");
        btn.addEventListener('click', fn(submit) )
        function submit(){
            console.log(1)
            console.log(this)
        }
        function fn(){
            var t = null
            return function(){
                    let context = this
                if(t){
                    clearTimeout(t)
                }
                t =  setTimeout(function(){
                    submit.apply(context, arguments)
                },1000)
            }
        }

 

节流

节流和防抖有点相似就是获取到时间戳的时间减去点击目标的时间如果大于设置的值函数就是执行

var btn = document.getElementById("input")
        btn.addEventListener("click", fn(submit, 2000))
        function submit(e){
            console.log(e,this)
        }
        function fn(f, delay){
            var begin = 0
            return function(){
                var cur = new Date().getTime()
                if(cur - begin > delay){
                    f.apply(this, arguments)
                }
                begin = cur
            }
        }