当前位置:编程学堂 > 【js进阶】防抖节流+立即取消等待

【js进阶】防抖节流+立即取消等待

  • 发布:2023-10-10 09:15


  • 1.1非可执行版本

  • 1.2立即执行版本

  • 1.3合并版本

  • 1.4合并版本+立即取消等待

  • 2.1非可执行版本

  • 2.2立即执行版本

  • 2.3合并版本

  • 2.4合并版本+立即取消等待


1。防抖(立即执行/非立即执行+立即取消等待)

  • 什么是防抖? :事件触发后,设置定时器。如果该事件在n秒内没有再次发生,则执行该函数。如果该事件在 n 秒内再次发生,则计时器将重新启动。启动计时器。


  • 申请
    • 每次调整大小/滚动时触发统计事件
    • 文字输入验证(连续输入文字后,发送AJAX请求验证,只需验证一次)

1.1非立即执行版本

//防抖(非立即执行)
功能debounce_1() fn,等等){
timerId = null;
返回 功能(){
 clearTimeout(timerId);
timerId = setTimeout(()=>{

这个 ,参数)
},等等)
}
}


1.2立即执行版本

 // 防抖(立即执行) 
function debounce_2(fn,wait{
timerId = null;
标志=true ;
返回 功能( ) fn.apply(这个,参数 ; => { flag = 是的},等等)
}
}


1.3合并版本

//抖防(合并版)
功能 debounce_merge(fn,wait = 500, isImmediate = false){
  lettimerId = null;
  let flag = true;
  if(是立即){
    返回 功能(){       clearTimeout(timerId);
      if(标志){
        fn.apply(this,参数);
        标志= false
        }
      timerId = setTimeout(() => { 标志 = true},等等)
    }
  }   返回 功能( ){
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(这个,争论
    },等等)
  }
}

1.4 合并版 + 立即取消等待

//防抖(合并版)
导出 const debounce = function ( fn,等待 = 500,isImmediate = false ) {
//定时器
timerId = null;

// flag 为 true 时立即执行执行
let flag = true;
let resultFunc = null;


if (isImmediate) {

//立即执行


//之后最后间隔超过2秒,再执行完成查询

结果函数 = 函数 () {
上下文 = 这个;

     clearTimeout(timerId);
                                                                                                                                                       =
                                                                             计时器 ID                                                     ?

    resultFunc.cancel = 功能 () {
                                                                                                                                                                                                                      //此时输入框失去焦点。触发取消等待方法,立即执行完成查询操作,并显示结果

console.log("立即取消等待") ?                标志 = true
                                                                                                                                                                                                                                            ?在输入框中输入字符。最后间隔超过2秒后,完成查询

resultfunc = Function () {
let
context = 这个; => {
                                                   参数)
                                                                                                                                                                                         () {
       控制台。 log("立即取消等待");
返回 resultFunc;
}


2。限流(立即执行/非立即执行+立即取消等待)

  • 什么是节流:一个事件在n秒内被触发多次,但期间绑定的函数只会执行一次(即函数的执行频率降低)
  • 申请
    • 与 mousemove keyup/keydown 等密切相关的功能。
    • 输入框发送完成查询
    • 对于限时抢购按钮,按一次后,接下来的几秒内将不允许用户继续按它们(也可以使用锁)
fn,等等){
标志 = true;
返回 功能(){
if(标志 == true ){
  标志 =
var计时器 = setTimeout(() => {
​​​​ )
   flag = true
  },等等)
}
}
}

2.2立即执行版本

//节流(立即执行)
功能throttle_ 2(fn,等等 ){
var 标志 = true;
var计时器 = null
返回 功能(){
if(标志){
这个,参数);
“ flag = false; 计时器 = setTimeout(() => {
            旗帜 = 正确
                                                                                                                                                   合并版
//节流(合并)
功能ionthrottle_merge(fn,等待= 500,isImmediate = false) {
  标志=true ;
   计时器= null;
    
  if(立即){
    返回 函数(){
      if(标志){
        fn.apply(这个,参数);
        flag = false;
        计时器 = setTimeout() () => {
          旗帜= true
        },等等)
      }
    }
  }
    
   返回
 功能(){
    if(标志===){
      标志= 
      var定时器=setTimeout(() => {
        fn.apply(这个,参数)         旗帜= true
      },等等)
    }
  }
}

2.4 合并版 + 立即取消等待

//节流(合并)
导出 const  油门 = 功能fn,等等= 500, isImmediate = false{
     标志=  true
;
    定时器=null;

    结果Func = null;

    if (isImmediate) {
        //立即执行
        结果Func = 函数 ({
             if (标志) {
               fn.apply(这个, arguments);
flag =false; timer = settimeout(()=>{
{
flag =true
                },等等)
            }
        }

        resultFunc.cancel = 功能 ({
            控制台 .log("立即取消等待")
            clearTimeout(timer)
        }
    } else {
        // 不立即执行
        结果Func = 函数 ({

            if(标志== true){
标志 = false
计时器 = setTimeout(() => {
fn.apply(this , 参数) 标志 = rTrue
},等待)}}}

resultfunc.cancel = 函数 () {
{
{
console.log("立即取消等待")
      clearTimeout(定时器);
flag = 真
;
}
}

返回 resultFunc;

}


相关文章