首页 > 其他分享 >防抖节流

防抖节流

时间:2022-08-29 10:46:25浏览次数:39  
标签:function 防抖 节流 cb timer delay

防抖节流(重点)

浏览器的极限绘制频率60侦,计时器的话大概为16.666

高频触发的业务:抽奖 登录 动画 网络加载等等需要

// 登录 防抖
function fangdou(cb,delay) {
  var timer = null
  reture function() {
    let arg = arguments
    clearTimeout(timer)
    timer = setTimeout(()=>{cb()},delay)
  }
}
document.onclick = fangdou(function(e) {
  // 操作
},1000)
// 滑动 节流 每隔一段时间调用一次
function move(cb,delay) {
  var timer = null
  return function() {
    let arg = arguments
    if(!timer) {
      timer = setTimeout(()=>{
        cb.apply(this,arg)
      },delay)
      timer = null
    }
  }
}
document.onmousemove = move(function() {
  // 操作
},1000)

优化this 通过时间戳和计时器来设计

标签:function,防抖,节流,cb,timer,delay
From: https://www.cnblogs.com/shuilifang/p/16635045.html

相关文章

  • js实现防抖节流
    前端项目开发过程中,对一个dom元素动作绑定了事件,但触发dom函数的动作过于频繁从而影响页面性能甚至出现bug的情况,比如:页面滚动scroll事件、浏览器窗口resize事件、输入框......
  • 防抖和节流
    防抖和节流防抖/* 应用场景:当用户进行了某个行为(如点击)之后,不希望每次行为都会触发方法,而是行为做出后,一段事件内没有再次重复行为,才给用户响应. 实现原理:每......
  • 事件节流
    事件节流用于控制事件触发的最小间隔。如一个事件100毫秒内只能触发一次。如窗口缩放过程中对页面的元素大小重新调整,因为resize事件的触发是非常快的,用户虽然在频繁......
  • Java中字节流的总结及代码练习
    Java中的字节流在描述字节流时,先知道什么是流流可以分为:输入流和输出流输入流和输出流示意图:字节流读取内容:二进制,音频,视频优缺点:可以保证视频音频无损,效率低,没有缓......
  • js函数节流(Throttle)
    在浏览器DOM事件里面,有一些事件会随着用户的操作不间断触发。比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove),输入框监听(oninput)等。也就是说......
  • JavaIO流---字节流和字符流
    1.字节缓冲流1.1字节缓冲流构造方法【应用】字节缓冲流介绍lBufferOutputStream:该类实现缓冲输出流。通过设置这样的输出流,应用程序可以向底层输出流写入字节,而不......
  • 练习6:节流和防抖实现
    节流函数节流指的是某个函数在一定时间间隔内(例如3秒)只执行一次,在这3秒内无视后来产生的函数调用请求,也不会延长时间间隔。3秒间隔结束后第一次遇到新的函数调用会......
  • 防抖和节流的介绍及实现
    防抖概述:在规定时间内只执行一次(执行最后一次)举个例子:电梯关门案例a进入电梯等待5s后就可以上升了在a等待了4s中后b过来那么之前的等待就结束了开始新的等待......
  • 闭包节流和防抖
    <style>div{width:200px;height:200px;background-color:skyblue;margin:50pxauto;}</style><div></di......
  • js防抖和节流实现
    1、防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想......