手写防抖节流函数

最新推荐文章于 2024-06-11 22:16:35 发布
最新推荐文章于 2024-06-11 22:16:35 发布
阅读量165 收藏
点赞数
分类专栏： 手写题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35218523/article/details/117885266
版权

防抖

  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)，这里按实际需求来编写代码。
在这里插入图片描述

饮尽杯中月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写通用防抖与节流函数
周周池的博客
04-20 235
我们经常会绑定一些持续触发的事件，比如resize、scroll、mousemove等等，如果事件调用无限制，会加重浏览器负担，导致用户体验差，我们可以使用debounce(防抖)和throttle(节流)的方式来减少频繁的调用，同时也不会影响实际的效果。 防抖的概念 触发事件后n秒后才执行函数，如果在n秒内触发了事件，则会重新计算函数执行时间 防抖函数可以分为立即执行，和非立即执行两个版本 直白点：一定时间内，只有最后一次操作有效，再过wait毫秒后才执行函数 使用场景：例如拖动改变浏览器大小的时候，需要
手写防抖、节流函数
Wancc123的博客
07-22 300
防抖：短时间大量触发同一事件，只执行一次函数，实现延迟执行。 节流：节流即每隔一个时间间隔，执行一次任务（多次触发只执行一次）。 防抖： // 防抖 function debounce(fn, delay = 300) { //默认300毫秒 let timer; return function () { const args = arguments; if (timer) { clearTimeout(timer); } timer = setTi
手写节流防抖函数
最新发布
qq_45487080的博客
06-11 293
应用场景：搜索框停止输入后再触发搜索、滚动触发事件等。
实现防抖,节流
Falicitas的博客
03-21 381
防抖 function debounce(fn,wait,immediate){ let timer=null; return function Fn(){ const context=this; const args=arguments; if(timer) clearTimeout(timer); if(immediate){ let callNow=!timer; tim
手写防抖/节流函数
weixin_39400507的博客
05-16 198
防抖 触发事件之后，在n秒内函数只能执行一次，如果在n秒内又触发了函数，则会重新计算函数执行事件 /** * @desc 函数防抖 * @param fn 函数 * @param wait 延迟执行毫秒数 * @param immediate true 表立即执行，false 表非立即执行 */ const debounce = function (fn, wait, immediate = false) { let timer = null return function () {
手写节流和防抖函数
OceanH的博客
05-03 381
1. debounce()防抖函数🍊 某个函数在短时间内只执行最后一次。 function debounce(fn,delay = 200) { if(typeof fn !== 'function'){ return TypeError('fn is not a function') } let lastfn = null return function(...args) { if(lastfn){ clearT
手写一个防抖和节流函数
m0_45093055的博客
03-28 1147
一. 封装代码 let btn = document.getElementById('btn'); function submit() { console.log('submit1234444') } function debounce(fn,delayTime,trggleNow = false) { let t = null; return function() {
手写防抖和节流函数
weixin_42539854的博客
04-09 420
/* 防抖：是指在事件被触发后，在n秒内函数只执行一次，如果在n秒内重复被触发，则重新开始计时 */ /** * 防抖函数，计时结束时触发 * @param { Function } callBack * @param { Number } 延迟秒数 * @returns { Function } */ function debounce1 (funs, delay) { let timer return function () { let arg = ar.
Javascript面试重点-手写防抖节流函数
m0_71485750的博客
07-08 2885
我们按照如下思路来实现：1.需要接收什么参数:参数一: 回调的函数参数二: 延迟时间 2.返回值是什么最终我们返回结果是要绑定对应的监听事件的, 所以返回值一定是一个新的函数 3.内部实现我们可以在_debounce函数中开启个定时器, 定时器的延迟时间就使用delay并且每开启一个定时器, 我们都需要将上一次的定时器取消掉 这样防抖的基本实现就已经实现完成, 已经可以实现防抖的效果, 我们可使用上一篇的输入框案例测试一下测试代码帮大家拿过来 完成以上代码, 我们已经实现了防抖函数最核心的一
JavaScrip手写函数之节流防抖函数
weixin_42662753的博客
07-24 252
Js手写函数之节流防抖函数
节流和防抖
qq_35219361的博客
07-12 200
一、防抖 防抖（原理）：事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时（英雄联盟回城）。 var timer; function debounce(fn, delay) { clearTimeout(timer); timer = setTimeout(function(){ fn(); }, delay); } 二、节流 节流（原理）：一段时间内，只执行一次函数（英雄技能）。 var timer; function throttle(fn, d
手写防抖跟节流函数
weixin_64220501的博客
01-01 81
防抖、节流
js 手写防抖和节流函数
04-16
好的，我可以回答你关于 JavaScript 手写防抖和节流函数的问题。 先，防抖和节流函数是为了解决高频率触发某个事件时，减少事件触发的次数，提高性能而设计的。 防抖函数的作用是在某个函数触发后，延迟一定的时间再执行这个函数，若在延迟时间内，这个函数又被触发，则重新计时，最后只会执行一次这个函数。以下是防抖函数的示例代码： ```javascript function debounce(func, delay) { let timer = null; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { func.apply(context, args); }, delay); }; } ``` 节流函数的作用是在某个函数触发后，不立即执行这个函数，而是等到一定的时间后，才执行这个函数，若在等待时间内，这个函数又被触发，则忽略这个函数的执行。以下是节流函数的示例代码： ```javascript function throttle(func, delay) { let timer = null; return function () { const context = this; const args = arguments; if (!timer) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); } }; } ``` 以上就是 JavaScript 手写防抖和节流函数的基本实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值