利用闭包实现防抖

最新推荐文章于 2024-05-01 08:45:00 发布
最新推荐文章于 2024-05-01 08:45:00 发布
阅读量79 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66527740/article/details/130991283
版权 
 <input type="text" id="inp">
  var oInp = document.querySelector("#inp");
  const debounce = function (fn, delay) {
    let timer

    return function () {
      clearTimeout(timer)
      timer = setTimeout(fn, delay)
    }
  }
  let init = 0
  oInp.oninput = debounce(function () {
    init++
    console.log(init);
  }, 500)

茄子194
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
11. code闭包.zip
08-28
闭包是编程语言中的一个重要概念，特别是在JavaScript等函数式编程语言中。闭包是指一个函数能够访问并操作其外部作用域中的变量，即使这...在实际项目中，合理利用闭包可以提高代码质量，提升程序的可读性和可维护性。
web-the-source-code:手写实现
04-06
9. **防抖与节流**：这两个概念常用于优化频繁触发的事件处理，比如窗口的resize或scroll事件。手写实现能帮助理解它们的区别和应用场景。 10. **深拷贝与浅拷贝**：理解引用类型数据的复制问题，手写`JSON.parse...
通过闭包实现防抖节流
weixin_42178670的博客
10-17 877
通过闭包实现防抖节流 防抖目的：用户触发时间过于频繁，只执行最后一次。节流目的：控制执行次数。
闭包的应用之防抖与节流
weixin_51737813的博客
11-13 50
当sendAjax是箭头函数的时候，他的this指向的是window全局,所以是underfind。同时把return后面函数也要改为普通函数，这样this就会指向调用它的元素，把sendAjax改为普通函数时，this指向在调用debounce时候在里面就在return中被apply改变为调用它的元素，使其打印出来为<input />的元素。调用的函数中的this指针指向触发的函数怎么做？
闭包 && 防抖 && 节流
最新发布
qq_52602294的博客
05-01 190
闭包 && 防抖 && 节流 在回答的时候 回答完闭包后 要主动地吧防抖和节流说出来
闭包的使用场景，防抖为什么要使用闭包详解
nameisyaya的博客
11-25 909
那就说说防抖为什么要用闭包吧，不用闭包行吗
js利用闭包实现防抖函数
Merlin2017的博客
08-28 459
使用js实现防抖函数: function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时 timer = setTimeout(fn,delay) }else{ time
2020-09-14 利用闭包实现防抖和节流
chelseapupu的博客
09-14 588
一 、闭包 function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc(); 运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方（也是有意思的地方）在于内部函数 displayName() 在执行前，从外部函数返回。 第
vue实现手机号码的校验实例代码（防抖函数的应用场景）
10-16
防抖函数的实现是一个闭包，它保存了一个定时器 `timer`。每次 `check` 被调用时，如果之前已经存在定时器，会先清除它，然后重新设置一个新的定时器。定时器的回调函数会执行传入的原始函数 `fn`，在这里就是 `...
js实现手机移动端购物车结算页面特效.zip
11-19
- **事件节流与防抖**：对于频繁触发的事件（如滚动），使用事件节流或防抖技术减少函数执行次数，提高页面性能。 - **代码模块化**：通过模块化（如CommonJS, ES6的import/export）组织代码，降低耦合度，提高可...
JS实现图片翻书效果
04-06
在实现过程中，我们可以利用以下JavaScript技术： - **闭包**：用于封装翻页逻辑，防止全局变量污染。 - **对象和类**：创建一个Book或Page类来组织和管理页面的状态和行为。 - **事件委托**：如果有多页，可以将...
闭包实现防抖与节流
gui3135926448的博客
03-01 676
闭包
防抖为什么要使用闭包
m0_51055743的博客
03-11 3610
1. 防抖 从概念上来讲，所谓的闭包指的是一个函数，有权访问另一个函数作用域中的变量的函数。 直观点来讲，JavaScript的闭包就是函数中嵌套函数。 <input type="text" id="input"/> <div id="show"></div> <script> function showInfo(text){ document.getElementById('show').innerHTML=text.target.value }
利用闭包实现函数防抖、函数节流
蔡武坤的博客
08-05 1206
function _throttle(fn, delay) { var canRun = true; return function() { if (!canRun) { return false; } canRun = false; fn.apply(this, Array.from(arguments)); setTimeout((...
关于闭包函数（防抖函数）的使用和清除的方法
zyxczyf123的博客
09-26 2782
vue中使用闭包的使用 这是抽离出去的闭包函数的封装 export default function debounce(func, wait=1000) { var timer=null; return function() { if (timer){ clearTimeout(timer); } timer = setTimeout(() => { func(); }, wait); }
什么是闭包？(以防抖函数作为示例)
Vision的博客
02-11 1767
什么是闭包？ 简单来说，就是能够读取其他函数内部变量的函数就是闭包。例如：防抖和节流函数就是很好的闭包例子 闭包的产生其实来自于js的变量作用域。在js中，变量的作用域属于函数作用域，当函数执行完成之后，作用域就会被清理，内存也就随之被回收。但是由于闭包函数是建立在函数内部的子函数，闭包函数又能够访问父函数的变量，所以就会导致当父函数执行完成时，其作用域不会销毁，该变量永久的保存在内存中直到闭包...
使用闭包优化防抖函数
github_39506988的博客
06-29 555
如何使用闭包优化防抖函数？ 优化之前 let timer = null const 防抖 = (函数名, 时间, 参数) => { clearTimeout(timer) timer = setTimeout(() => { 函数名.call(this, ...arguments) }, 时间) } const 函数名 = (函数名, 时间, ...
为什么函数防抖要用到闭包？
Cosmic Lover
03-09 794
防抖的标准写法为： function debounce(fn, delay){ let timer = null; return function(){ if(timer){ clearTimeout(timer) timer = setTimeOut(fn, delay)
JS 中防抖函数形成闭包的相关处理及思考
似水流年的博客
08-04 486
在匿名函数 A 中，timeout 被用来作为 setTimeout 函数的返回值，因为防抖函数要实现的效果是在高频次尝试触发某个行为时，阻止该行为发生，而在一段时间（wait）后都没有尝试触发该行为时，再执行该行为（生活中这样的例子很常见，比如公交车司机停车后等待乘客全部上车后关门），因而我们需要 timeout 变量保存之前的 id 值（有 id 值存在则说明在此之前有尝试触发过该行为）。当然，这是一个 vue 文件。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。.
j s闭包防抖节流
06-02
闭包、防抖和节流都是 JavaScript 中常用的技术，用于解决一些常见的问题。 闭包是指函数能够访问其外部作用域中的变量，即使在函数外部，这些变量也仍然存在。闭包常用于创建私有变量和函数。例如： ``` function counter() { let count = 0; return function() { return ++count; } } const increment = counter(); console.log(increment()); // 1 console.log(increment()); // 2 ``` 防抖和节流都是用于处理事件频繁触发的情况，以减少性能开销。 防抖是指在事件触发后一定时间内没有再次触发时，才执行相应的操作。例如： ``` function debounce(fn, delay) { let timer; return function() { const args = arguments; clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); } } function handleInput() { console.log('Input has stopped.'); } const debouncedHandleInput = debounce(handleInput, 500); document.querySelector('input').addEventListener('input', debouncedHandleInput); ``` 节流是指在一定时间间隔内，只执行一次相应的操作。例如： ``` function throttle(fn, delay) { let lastTime = 0; return function() { const currentTime = Date.now(); if (currentTime - lastTime > delay) { fn.apply(this, arguments); lastTime = currentTime; } } } function handleScroll() { console.log('Scrolling...'); } const throttledHandleScroll = throttle(handleScroll, 500); window.addEventListener('scroll', throttledHandleScroll); ``` 以上是简单的例子，实际应用中还需要根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值