美文网首页前端
防抖,闭包,call,apply

防抖,闭包,call,apply

作者: avery1 | 来源:发表于2019-03-29 17:04 被阅读15次

    防抖前面已经用过,但没有研究具体代码,因为用到闭包,call,apply就一起看下了。

    Debounce 和 Throttle 的原理及实现

    我试过这篇文章里的防抖

    防抖

    Tips

    注意debounce函数的使用,如果直接在函数上调用,肯定是不行的。比如

    <input type=“text” onkeyup="debounce(change, 1000)()"/>

    这样的话是不起作用的,相当于每次keyup都出发一次debounce,然后都会重新定义timer,因为debounce返回的是函数,在加()是调用函数,这时候clearTimeout()起不到作用,也就起不到作用。

    正确的使用方法应该是。先定义debounce返回的函数,然后在调用这个函数,如下

    html

    <input type="text" onkeyup=“refresh()”

    js

    let refresh = debounce(change,1000)

    这样相当于在定义refresh的时候只定义了一次timer但是每次调用的时候会判断timer的存在,存在则会清除之前的定时器,也就不会执行change函数,如果时间没到delay的时候继续输入,这时候调用函数就会执行清除定时器操作清除定时器。如果超过这个时间没有继续操作,那么延时器内的操作函数就会执行。

    这里用到闭包的作用是避免在全局内定义一个定时器来占用全局空间,如果在全局定义一个变量的话,我们可以直接使用debounce里return出来的函数就可以了,闭包的作用只是为了定义一个函数内的变量,但是在每次调用时还能读取到这个变量。相当于在多次函数的调用之间产生了联系。apply的作用只是为了传递上下文,将参数和返回函数的参数以及this指向等统一,相当于我们在调用debounce产生的函数时不用考虑参数上下文会出现偏差。

    闭包

    闭包

    让你分分钟理解 JavaScript 闭包

    闭包是将函数作为返回值,实际上也只是返回函数的定义,不会调用。但是可以读取函数内部的变量。

    调用f1(), f2(), f3() 不是返回 1, 4, 9. 实际返回的是都是16。这个是先返回,后再执行。返回的是i值,最后i为4

    Call和Apply

    apply()与call()的区别

    call和apply是为了改变上下文存在的函数

    实际上也就是改变函数this的指向,将参数引入。

    它们的共同之处:

    都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

    即对象是括号内的第一个对象,方法是我们所写的对象的方法

    它们的不同之处:

    apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。

    call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。

    实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。

    相关文章

      网友评论

        本文标题:防抖,闭包,call,apply

        本文链接:https://www.haomeiwen.com/subject/vfcrbqtx.html