手写防抖节流函数

Posted 饮尽杯中月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手写防抖节流函数相关的知识,希望对你有一定的参考价值。

防抖

  1. 每次都检查timeout是否有内容,如果有就clearTimeout,然后生成一个新的timeout,这个新的timeout的回调函数是这个传入的func,等待时间为wait
  2. 改变debouned函数的作用域到正确(this和arguments指向)
  3. let context = this; let args = arguments;
  4. func.apply(context, args);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container 
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            background-size: 30px;
        
    </style>
</head>

<body>
    <div id="container"></div>
    <button id="btn">取消防抖</button>
    <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js"></script>
    <script>
    </script>
    <!-- <script src="./debounce.js"></script> -->
    <script src="./throttle.js"></script>
</body>

</html>
//防抖:
//当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。
//应用场景:
//1.scroll事件滚动触发
//2.搜索框输入查询
//3.表单验证
//4.按钮提交事件
//5.浏览器窗口缩放,resize事件

function debounce(func, wait, immediate) 
    //优化,如果doSomeThing有return值,此时可以用result来接收防抖优化后的doSomeThing的返回值
    let timeout, result;
    //函数也是对象 debounced对象
    let debounced = function() 
        //此处的this,为debounced的this,也就是doSOme()的this,即是container
        //但是func(也就是doSomeThing())的this却为window
        //func.apply(context, args);使得doSomeTing的作用域也为container
        let context = this;
        //改变event的指向问题,从doSomeTing接收的event为underfind到doSome接收的event为onmousemove事件
        //此处的arguments,为debounced的arguments,也就是doSOme()的arguments,即是onmousemove事件
        //但是func(也就是doSomeThing())的arguments却为undefined
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) 
            //1.当首次激发事件,timout为null,所以callNow为true可以立即执行
            //2.当首次激发事件,但是没有到达wait时间,再次激发事件,此时timeout有值,
            //所以callNow为false,不能立即执行,完成防抖操作
            //3.当长时间没有再次激发事件,就将timeout=null,方便下次可以再次立即执行
            let callNow = !timeout;
            timeout = setTimeout(() => 
                timeout = null;
            , wait);
            //立即执行
            if (callNow) result = func.apply(context, args);
         else 
            timeout = setTimeout(function() 
                func.apply(context, args);
            , wait);
        
        return result;
    
    debounced.cancel = function() 
        clearTimeout(timeout);

        timeout = null;
    
    return debounced;



let count = 0;
let container = document.querySelector('#container');
let btn = document.querySelector('#btn');

function doSomeTing(e) 
    //可能会做回调或者ajax请求
    container.innerHTML = count++;
    //e:underfind
    console.log(e);
    return '想要的东西'


let doSome = debounce(doSomeTing, 300, true);
btn.onclick = function() 
    //取消防抖操作
    doSome.cancel();


container.onmousemove = doSome;

节流

//节流
//原理:控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次
//应用场景:
//1.DOM元素的拖拽功能实现
//2.射击游戏类
//3.计算鼠标移动的距离
//4.监听scroll滚动事件

function throttle(func, wait, options) 
    let context, args, timeout;
    let old = 0;
    //如果用户不传options
    if (!options) options = ;
    let later = function() 
        old = new Date().valueOf();
        timeout = null; 
        func.apply(context, args);
    
    return function() 
        context = this;
        agrs = arguments;
        //每一次被运行时,都会获得当下的时刻
        let now = new Date().valueOf();
        if (options.leading === false && !old) 
        	//更新old
            old = now;
        
        if (now - old > wait) 
            //第一次执行 ,最后一次不执行
            if (timeout) 
                clearTimeout(timeout);
                timeout = null;
            
            func.apply(context, args);
            old = now;
        // 当触发事件时候,会设置定时器,此时定时器timeout一直存在,无法进入该else if,
        //如果再次触发,且wait延迟达到,此时将timeout=null,将再次进入else if
        else if (!timeout && options.trailing !== false) 
            //第一次不执行,最后一次还会执行
            timeout = setTimeout(later, wait);
        
    



let count = 0;
let container = document.querySelector('#container');
let btn = document.querySelector('#btn');

function doSomeTing(e) 
    //可能会做回调或者ajax请求
    container.innerHTML = count++;
    //e:underfind
    console.log(e);
    return '想要的东西'


let doSome = throttle(doSomeTing, 5000, 
    leading: true,
    trailing: true
);


container.onmousemove = doSome;

另一种节流方案

throttle是一个闭包,其返回的函数是这个闭包的入口,而pre是这个闭包隐藏的局部变量,是一个私有变量,而返回函数的执行过程中,会改变pre的值,而当第一次onmousemove 完成后,第二次再次执行onmousemove 事件,想要pre回到最开始状态(pre = null),此时下一次又可以按原始状态进行了。

else里面实现:相当于执行的是最后一次,功能就是将定时器清空,然后过一个interval后将pre回到最开始状态(pre = null),其中还可以实现最后一次计数func.apply(context, args),或者取消最后一次计数,不执行func.apply(context, args),这里按实际需求来编写代码。

以上是关于手写防抖节流函数的主要内容,如果未能解决你的问题,请参考以下文章

手写防抖节流函数

手写防抖节流函数

手写防抖、节流 hook(ts版)

7.手写防抖和节流工具函数并理解其内部原理和应用场景

手写Debounce 防抖函数遇到的坑

js面试题之手写节流函数和防抖函数