〆`詠恆.o 2023-02-24 18:53 采纳率: 100%
浏览 17
已结题

一个关于闭包防抖的疑惑 js

一个关于闭包防抖的疑惑,望朋友们赐教,感谢:

  function fangdou(callback,time){
    let  timeout
    return function(){
      if(timeout) clearTimeout(timeout)
      timeout =  setTimeout(callback, time);

    }
  }
 function con(){
 console.log('发起请求')
 }
document.addEventListener('input',fangdou(con,2000))

input框输入停止后2s才打印。这个是能够正常实现的,但是如果我改写成:

function fangdou2(){
    let  timeout
    return function(callback,time){
      if(timeout) clearTimeout(timeout)
      timeout =  setTimeout(callback, time);

    }
  }
  function con2(){
 console.log('发起请求2')
 }
const foo = fangdou2()
document.addEventListener('input',foo(con2,2000))

只是用foo将函数fangdou2先执行了拿到了闭包函数,监听input框时执行foo。但是会出现第一次加载页面时就会自动打印'发起请求2‘’,这个为什么呢?

img

还有,input框中输入也不会触发函数con2?

img

  • 写回答

1条回答 默认 最新

  • MarkHan_ 2023-02-24 19:26
    关注

    该回答引用GPTᴼᴾᴱᴺᴬᴵ
    第一个问题是因为在执行 fangdou2() 时,函数内的代码会被执行一次,导致 timeout 已经被定义为 undefined,所以 if(timeout) 判断条件不成立,直接执行了 setTimeout(callback, time),因此在页面加载时就会自动打印一次。
    -
    为了避免这种情况,可以将 timeout 的初始值设置为 null,这样在第一次调用 callback 前判断 if(timeout !== null) 会返回 false,避免了自动执行 callback 的问题。
    -
    第二个问题是因为在 fangdou2() 函数中,闭包函数接收的是 callback 和 time 参数,但在监听 input 事件时,传入的参数却是 con2 和 2000。这样虽然能够解决 timeout 的问题,但无法正常触发函数。可以考虑将 con2 和 2000 作为参数传入闭包函数中,而不是作为监听器函数的参数。修改后的代码如下:

    function fangdou2() {
      let timeout = null;
      return function(callback, time) {
        if (timeout !== null) clearTimeout(timeout);
        timeout = setTimeout(callback, time);
      }
    }
    
    function con2() {
      console.log('发起请求2');
    }
    
    const foo = fangdou2();
    document.addEventListener('input', function() {
      foo(con2, 2000);
    });
    

    这样就能正常触发函数了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月4日
  • 已采纳回答 2月24日
  • 创建了问题 2月24日

悬赏问题

  • ¥15 YOLOv8已有一个初步的检测模型,想利用这个模型对新的图片进行自动标注,生成labellmg可以识别的数据,再手动修改。如何操作?
  • ¥15 怎么做商品窗体,完完全全不会
  • ¥30 NIRfast软件使用指导
  • ¥20 matlab仿真问题,求功率谱密度
  • ¥15 求micropython modbus-RTU 从机的代码或库?
  • ¥15 铜与钢双金属板叠加在一起每种材料300mm长,18mm宽,4mm厚一端固定并加热至80℃,当加热端温度保持不变时另一端的稳态温度。ansys
  • ¥15 django5安装失败
  • ¥15 Java与Hbase相关问题
  • ¥15 后缀 crn 游戏文件提取资源
  • ¥15 ANSYS分析简单钎焊问题