JavaScript防抖与节流的示例分析

这篇文章给大家分享的是有关JavaScript防抖与节流的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

防抖debounce

定义：对于短时间内连续触发的事件，比如滚动事件，防抖就是让某个时间期限内，事件处理函数只执行一次。

关于防抖，拿手指按压弹簧举例，用手指按压弹簧，一直按住，弹簧将不会弹起直到松开手指。

举例resize:

function debounce(fn, wait){    var timer = null;    return ()=>{        if(timer !== null){            clearTimeout(timer);        }        timer = setTimeout(fn, wait);    }}function handle(){    console.log(Math.random());}window.addEventListener("resize",debounce(handle, 1000));

上面是非立即执行版

立即执行版

function debounce(fn, wait){        let timeid, flag = true;        return () => {                clearTimeout(timeid);                if(flag){                        fn();                        flag = false;                }else{                        timeid = setTimeout(()=>{                                flag = true;                        }, wait);                }        }}

拖动浏览器窗口，触发resize，此时并不触发handle函数，定时器计时，在计时时间内再次触发resize的话，则会从新计时，这样做的好处就是拖动浏览器窗口触发resize，并不会频繁执行handle函数，只让其在需要执行的时候去运行，有效的去除了冗余。

常见写法：

const debounce = (func, delay = 200) => {  let timeout = null  return function () {    clearTimeout(timeout)    timeout = setTimeout(() => {      func.apply(this, arguments)    }, delay)  }}

节流throttle

定义：让事件在一定时间内只执行一次。

本意是像水龙头的水滴一样，规定时间内只执行一次，减少频繁反复执行。

如搜索框input事件。

通过时间戳计算：

function throttle(fn,wait){  let startTime = 0;  return function(){    let endTime = Date.now();    if(endTime-startTime>wait){      fn();      startTime = endTime;    }  }}

通过定时器：

function throttle(fn,wait){  let timeid = null;  return function(){    if(!timeid){       timeid = setTimeout(function(){         fn();         timeid = null;       },wait)    }  }}

感谢各位的阅读！关于"JavaScript防抖与节流的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！