JS写定时器节流函数配合Oninput事件

最新推荐文章于 2024-04-26 16:47:03 发布

小佬弟啊

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量874

点赞数

分类专栏： js基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_45619623/article/details/111622828

版权

js基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS写定时器节流函数

JS定时器

1、setTimeout
2、setInterval
3、clearTimeout
4、clearInterval

什么是JS定时器

最简单来讲就是JS提供给我们的一种延时执行代码的方法，比如我想在某个按钮按下以后，等待1秒去执行提醒，这是最基础的用法；

<html>
<body>

<script type="text/javascript">
function clock()
{
alert('我是延时执行')
}
</script>

<button onclick="setTimeout(function(){clock()},1500)">1.5秒执行</button>

</body>
</html>

这里的示例就是介绍了setTimeout的用法，他是多久以后去执行一次方法体；那么有一次肯定就是有多次的了比如setInterval，它会一直按照间隔事件去执行，只要没被清除掉；

<html>
<body>

<script type="text/javascript">
function clock()
{
alert('我是延时执行')
}
</script>

<button onclick="setInterval(function(){clock()},1500)">1.5秒执行</button>

</body>
</html>

所以一般会配合clearInterval方法去清除掉它，否则就会像上面的代码一样，一直不休止的再循环调用；

<html>
<body>

<script type="text/javascript">
	var time;
function clock()
{
	time=setInterval(function(){alter('我是延时执行');},1500);
}
	
function clears(){
	debugger
	clearInterval(time);
}
</script>

<button onclick="clock()">1.5秒执行</button>
<button onclick="clears()">取消1.5秒执行</button>

</body>
</html>

在这里我们点击第一个按钮会执行打印，当我们点击第二个按钮他就会停止打印，也就是说定时器被清除掉了；

Oninput

首先还是介绍一下这是个啥，这是监听文本框的内容改变事件，比如最常见的百度输入框，你一边输入它在下面一边进行模糊搜索，这个就是最常见的使用场景了，但是我们在直接使用的时候是有问题的，因为它会一个字符执行一次，比如我用拼音打一个 “”“你在干什么”，那他就会执行"nizaiganshenme"在这一句话它会执行14次，也就是说会去调用查询接口14次，这样太频繁了，显然达不到设计标准。所以我们要配合JS定时器，来写一个节流函数，让它应该是等到我们输入完或者是输入中间停顿了一定时间才去执行查询！

        //节流函数，防止用户短时间多次输入导致多次调用
        var inputtime;//定义变量接收定时器
        
        function throttle(res, type) {//这里的参数不是必须的，是因为我下面的方法体需要
            clearTimeout(inputtime);
            inputtime = setTimeout(function () {
                GetBBstatusSelect(res, type)//执行自定义方法体
            }, 1000)
        }

上面就是定义好的节流函数，这个时候我们去页面调用

<html>
<body>

<script type="text/javascript">
       //节流函数，防止用户短时间多次输入导致多次调用
        var inputtime;//定义变量接收定时器
        
        function throttle(res, type) {//这里的参数不是必须的，是因为我下面的方法体需要
            clearTimeout(inputtime);
            inputtime = setTimeout(function () {
               console.log("开始查询，您输入的是："+res)
            }, 1000)
        }
</script>
<input type="text" oninput="throttle(this.value,1)"/>

</body>
</html>

通过这个方式你会发现，如果我每次输入间隔在1秒内，那么它是不会去执行打印的，这里打印换成我定义好的查询方法那么这个输入模糊查询就完美实现了，后面的1000代表1秒，如果觉得频率太快还可以设置成1.5秒或者2秒，总之这样就完美实现了一边输入一边查询了！！！
在这里插入图片描述

小佬弟啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS写定时器节流函数配合Oninput事件

JS写定时器节流函数JS定时器什么是JS定时器OninputJS定时器1、setTimeout2、setInterval3、clearTimeout4、clearInterval什么是JS定时器最简单来讲就是JS提供给我们的一种延时执行代码的方法，比如我想在某个按钮按下以后，等待1秒去执行提醒，这是最基础的用法；<html><body><script type="text/javascript">function clock(){alert('
复制链接

扫一扫