函数节流与函数去抖

Posted 2021-01-22 yiangli

函数节流与函数去抖都是为了解决密集的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，并重新设置。