函数节流与函数去抖

函数节流与函数去抖都是为了解决密集的js函数运行问题。怎么分析和使用两种情况呢?

函数节流:

是指函数在一段时间执行一次,即降低函数运行的频率。比如说,在onmousemove时,进行一次dom操作,如果长时间的onmousemove,这样所触发回调数量是大量的,因为进行了大量的dom操作,可能导致浏览器无响应。这时候就可以听过函数节流,使一段时间触发一次回调函数,大大降低了消耗。

var ifRun  = true;
function run () {
    if (!ifRun) {
        return;
    }
    ifRun = false;
    ```
    do sth
    ```
    setTimeOut(() => {ifRun = true},300);
 }
dom.onmousemove = run();

  1.设置一个标识,用来判断是否执行函数。

  2.在触发函数时,如果不到所期望的时间,return,不继续执行函数。相反,将标识置反,并进行相应的业务代码。最后设置一个定时器,通过定时器,将标识置为true。

函数去抖(防抖):
函数仅执行一次,在等待间隔内触发函数时,更新等待时间。举个栗子🌰,常见的输入框校验,如果监听onkeyup事件,发起校验请求。实际上浪费了资源,因为我们所期望的是在输入完毕后进行校验。那么就可以通过函数去抖来实现。

var timer = false;
function debounce() {
    clearTimeOut(timer);
    timer = setTimeOut(() => {
        ```
        do sth
        ```
    }
}

  通过设置timeout,进行操作。调用函数是,首先清楚已经存在的timer,并重新设置。

posted @ 2018-11-23 18:07  Pomm  阅读(176)  评论(0编辑  收藏  举报