了解 JS 函数 节流 和 去抖动

香菊网 发表于: 2019-09-30 分类: js部分  前端front  H5部分  

了解 节流 & 抖动

节流:当我们scroll或者mousemove的时候,有时候调用的函数会被频繁的触发,这样就会造成很大的浏览器资源开销,而且好多中间的处理是不必要的,这样就会造成浏览器卡顿的现象,这时候就需要节流。

抖动:如果用户输入的同时,频繁的触发input事件,然后频繁的向后台发送请求,那么直到用户输入完成时,之前的请求都应该是多余的,假设网络慢一点,后台返回的数据比较慢,那么显示的联想词可能会出现频繁的变换,直到最后的一个请求返回。

区别 节流 与 抖动

简单说:如果一直触发这个方法的话

          节流是间隔一段时间触发一次

          去抖是直到你最后停下来了方法才会被触发

解决 节流 & 抖动

节流:

如何节流呢?我们无法做到让浏览器不去触发对应的事件,但是可以做到让处理事件的方法执行频率减少,从而减少对应的处理开销。

function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

去抖: 

如何去抖呢?这个时候就可以在一定时间内监听是否再次输入,如果没有再次输入则认为本次输入完成,发送请求,否则就是判定用户仍在输入,不发送请求。

function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}
标签: js部分前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮