当前位置: 移动技术网 > 移动技术>手机>手机系统 > 函数的防抖和节流

函数的防抖和节流

2020年10月29日  | 移动技术网移动技术  | 我要评论
虽然简单,还是记录一下<!-- 函数防抖 如果事件触发太快(时间间隔小于我们规定的时间),则不会执行业务代码--> function fn1() { let dom=document.body; let time; dom.addEventListener('mousemove',()=>{ clearTimeout(time); time=setTimeout(()=>{ console.log('send aj

虽然简单,还是记录一下

<!-- 函数防抖 如果事件触发太快(时间间隔小于我们规定的时间),则只执行最后一次事件的业务代码-->
<!-- 常见例子:搜索框在输入停止后(暂停时间大于我们规定时间)才发起请求-->
  function fn1() {
    let dom=document.body;
    let time;
    dom.addEventListener('mousemove',()=>{
      clearTimeout(time);
      time=setTimeout(()=>{
        console.log('send ajax fn1');//你的业务代码
      },500)
    })
  }
  <!-- 函数节流 无论事件触发多快,只在规定间隔内执行业务代码-->
  <!-- 常见例子:连续点击多次按钮,除了第一次,往后每隔一定时间再次触发事件才执行一次业务代码-->
  function fn2(){
    let dom=document.body;
    let flag=true;
    dom.addEventListener('click',()=>{
      if(flag){
        console.log('send ajax fn2');//你的业务代码
        flag=false
        setTimeout(()=>{
          flag=true;
        },2000)
      }
    })
  }

本文地址:https://blog.csdn.net/qq_42031498/article/details/109360207

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网