Java 点击防抖 jquery防抖

转载

mob64ca14154457 2023-12-27 12:56:47

文章标签 Java 点击防抖 jquery javascript 前端应用场景 文章分类 Java 后端开发

文章目录

一、防抖

1、什么是防抖
2、应用场景
3、实现输入框防抖
4、缓存数据

二、节流

1、什么是节流
2、应用场景
3、节流阀概念
4、使用

三、总结

一、防抖

1、什么是防抖

Java 点击防抖 jquery防抖_jquery

类似于游戏里的回城操作，一旦回城过程中再点一次回城就会停止上一次的延时及时，重新计时。

2、应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询请求，这样可以有效减少请求次数，节约请求资源

3、实现输入框防抖

//1、定义延时器id
var timer = null

//2、定义防抖函数
function debounceSearch(kw){
    timer = setTimeout(function(){
        getSuggestList(kw)    
    },500)
}


//为输入绑定keyup事件
$('#ipt').on('keyup',function(){
    //3、清空延时器
    clearTimeout(timer)
    var keywords = $(this).val().trim()
    if(keywords.length <= 0){
            return $('#suggest-lidt').empty().hide()  //清空匹配的选项列表比哦钱中的内容并在页面隐藏
    })
    //4、调防抖函数
    debounceSearch(keywords)
})

4、缓存数据

当用户多次输入相同的值时，会多次发送请求

$(function(){  //规范，可以不写
    //1.定义全局缓存对象
    var cacheObj = {}
    
  //为输入绑定keyup事件
$('#ipt').on('keyup',function(){
    
    clearTimeout(timer)
    var keywords = $(this).val().trim()
    if(keywords.length <= 0){
            return $('#suggest-lidt'.empty().hide())
    })
    
    //5、先查缓存,如果有则直接渲染数据
    if(cacheObj[keywords]){
        return renderSuggestList(cacheObj[keywords])    
    }
    debounceSearch(keywords)
}) 

//渲染函数
 function renderSuggestList(res){
      if(res.result.length <= 0){
          return $('#suggest-list').empty().hide()      
      }
      var htmlStr = template('tpl-suggestList',res)
      $('#suggest-list').html(htmlStr).show()
      //3、获取用户输入内容，当作键
      var k = $('#ipt').val().trim()
      //4、需要将数据作为值，进行缓存
      cacheObj[k] = res
 } 
})

二、节流

1、什么是节流

触发事件后会等待一段时间后再进行触发，在这个过程中，所有的触发操作都是无用的。减少事件触发频率，防止无限触发

2、应用场景

鼠标连续不断的触发某事件，只在单位时间内触发一次
懒加载时要监听计算滚动条位置，但不必每次滑动都触发，可以降低计算频率。

3、节流阀概念

节流阀相当于是一个状态值，节流阀为空表示可以执行下次操作，不为空，表示不能执行下次操作。当前操作完必须将节流阀置空，表示可以进行下次操作了，每次执行前都需要判断节流阀是否为空。

4、使用

模拟鼠标跟随动画

$(function(){
    var timer = null  //定义节流阀
    $(document).on('mousemove',function(e){  //给文档绑定一个鼠标移动事件
        if (timer) { return }  //判断节流阀是否为空
        timer = setTimeout(function(e){
            $('#angle').css('left',e.pageX+'px').css('top',e.pageY+'px') //动画跟随鼠标移动，事件对象中的形参e默认有坐标属性
            timer = null //清空节流阀
        },16)
    })
})