JS 手写防抖

痛定思痛。 2022-11-01 13:54 183阅读 0赞

### JS 手写防抖 ###

<!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>
    </head>
    
    <body>
        <input type="text" id="ipt">
        <script>
            var oIpt = document.getElementById("ipt");
    
            function getData(e) { 
                console.log("ajax请求")
                console.log(this);
                console.log(e)
            }
    
            oIpt.oninput = debounce(getData, 1300);
    
            //通用防抖函数
            function debounce(fn, time) { 
                var timer = null;
                return function () { 
                    //每次进入函数的时候，如果上一次的计时器没有执行
                    // 则直接给清掉，重新设置新的计时器
                    clearTimeout(timer);
                    //每次进到函数中的时候 让延迟time时间 执行函数fn
                    //这个位置的this才是真正的事件触发的对象
                    var _this = this;
                    var arg = arguments[0];
                    timer = setTimeout(function () { 
                        fn.call(_this, arg);
                    }, time)
                }
            }
        </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现防抖

防抖的目的是在一段时间内，只执行一次函数。下面是一个使用 JavaScript 实现防抖的示例： function debounce(fn, delay) {

ゝ一纸荒年。/ 2024年03月27日 12:53/ 0 赞/ 74 阅读

相关手写节流和防抖

<body> <button id="btn">点击防抖</button> </body> <script> var btn

Bertha 。/ 2022年12月10日 01:17/ 0 赞/ 207 阅读

相关 JS 手写防抖

JS 手写防抖 <!DOCTYPE html> <html lang="en"> <head> <meta c

痛定思痛。/ 2022年11月01日 13:54/ 0 赞/ 184 阅读

相关手写防抖与节流

概念介绍防抖：高频输入时，定时器时间间隔内将只执行一次函数，如果后续再次输入触发函数，将会重置这个定时间隔时间，并且延后触发例如：间隔为500ms，在第350ms

红太狼/ 2022年10月12日 12:59/ 0 赞/ 167 阅读

相关 js函数防抖

上代码，自己测试。防抖简单说就是减少http请求，前端性能优化 <!DOCTYPE html> <html> <head> <met

小咪咪/ 2022年09月16日 04:54/ 0 赞/ 206 阅读

相关 js 防抖原理

一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如： 1. window 的 resize、scroll 2. mousedown、mousemove 3.

深藏阁楼爱情的钟/ 2022年09月11日 08:19/ 0 赞/ 206 阅读

相关 JS防抖

在前端开发的过程中，有时候我们需要对一些事件进行相应，但是，有时候，这些事件可能会十分频繁的触发。比如： 1、window 的 resize、scroll 2

梦里梦外;/ 2022年06月13日 04:16/ 0 赞/ 235 阅读

相关 JS 防抖

没有防抖： var count = 1; var container = document.getElementById('container');

àì夳堔傛蜴生んèń/ 2022年06月06日 02:14/ 0 赞/ 236 阅读

相关 JS函数防抖

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。好像公交司机会等人都上车后才出站一样。应用场景： 1. 实时搜索 2. 拖拽当输完nba之

墨蓝/ 2022年05月23日 07:24/ 0 赞/ 215 阅读

相关手写函数防抖节流

DOM 0级事件 <style> .demo{width:200px;height:200px;border:1px solid red;overfl

系统管理员/ 2022年03月27日 06:52/ 0 赞/ 240 阅读