首页 > 其他分享 >setTimeout 函数在前端延迟搜索实现中的作用

setTimeout 函数在前端延迟搜索实现中的作用

时间:2023-12-02 19:33:27浏览次数:36  
标签:search bind 前端 搜索 ._ setTimeout SmartFilterBar 延迟

看这段代码:

SmartFilterBar.prototype._regularTriggerSearch = function (iDelay) {
		if (this.getSuppressSelection()) {
			return;
		}

		this._clearDelayedSearch();
		this._iDelayedSearchId = setTimeout(function () {
			var aPromises = this._getVisibleControlsLoadingPromises();

			if (!this._bSearchTriggeredOnce && aPromises.length) {
				Promise.all(aPromises)
					.then(this._search.bind(this))
					.catch(this._search.bind(this)); // We still trigger the search if something fails
			} else {
				this._search();
			}

		}.bind(this), iDelay || 0);
	};

这段JavaScript代码是一个名为SmartFilterBar的对象的方法,具体来说,这是该对象的_regularTriggerSearch方法。让我们逐行分析这段代码的含义:

  1. SmartFilterBar.prototype._regularTriggerSearch = function (iDelay) {
    这一行定义了SmartFilterBar对象的原型链上的_regularTriggerSearch方法。这个方法用于触发搜索操作,并且可以传入一个延迟时间参数iDelay

  2. if (this.getSuppressSelection()) { return; }
    在方法的开头,通过this.getSuppressSelection()检查是否需要禁止搜索。如果需要禁止,则直接返回,不执行后续的搜索操作。

  3. this._clearDelayedSearch();
    调用对象的_clearDelayedSearch方法,清除之前可能存在的延迟搜索。

  4. this._iDelayedSearchId = setTimeout(function () {
    使用setTimeout函数创建一个延迟执行的回调函数。这个函数将在延迟结束后执行搜索操作。

  5. var aPromises = this._getVisibleControlsLoadingPromises();
    调用对象的_getVisibleControlsLoadingPromises方法,获取可见控件的加载承诺(Promise)数组。

  6. if (!this._bSearchTriggeredOnce && aPromises.length) {
    检查是否搜索尚未被触发过且存在加载承诺。如果是,则使用Promise.all等待所有加载承诺完成。

  7. Promise.all(aPromises).then(this._search.bind(this)).catch(this._search.bind(this));
    当所有加载承诺完成时,执行搜索操作,使用this._search.bind(this)作为成功和失败时的回调函数。这里使用bind确保在回调函数中this指向当前对象。

  8. } else { this._search(); }
    如果搜索已经被触发过或者没有加载承诺,直接执行搜索操作。

  9. }.bind(this), iDelay || 0);
    将整个延迟执行的回调函数通过bind方法绑定当前对象,然后将它传递给setTimeout,同时指定延迟时间,如果未提供延迟时间则默认为0。

这段代码的主要目的是在延迟之后触发搜索操作,考虑了禁止搜索的情况和控制了搜索触发的条件。在有异步加载操作时,会等待加载完成后再执行搜索。这有助于提高性能和确保搜索的准确性。下面通过一个例子来说明这个过程:

// 创建一个SmartFilterBar对象
var smartFilterBar = new SmartFilterBar();

// 假设禁止了选择
smartFilterBar.setSuppressSelection(true);

// 调用_regularTriggerSearch方法,传入延迟时间2000毫秒
smartFilterBar._regularTriggerSearch(2000);

// 由于禁止了选择,直接返回,搜索不会被触发
// 如果选择未被禁止,将会在2000毫秒后触发搜索操作

标签:search,bind,前端,搜索,._,setTimeout,SmartFilterBar,延迟
From: https://www.cnblogs.com/sap-jerry/p/17872099.html

相关文章

  • 什么是前端 Web 应用响应式页面布局里的 Breakpoint 概念
    在Web前端开发中,响应式设计是一个非常重要的概念,它允许网页UI根据不同的设备屏幕大小进行适当的调整以优化用户体验。在这种设计中,breakpoint是一个关键的概念。我们可以把breakpoint理解为屏幕宽度的一种临界点,当屏幕宽度达到这个点时,我们会调整页面布局以适应这个新的屏......
  • 前端学习-JavaScript学习-js基础-API02-轮播图案例
    自己写的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • 【小沐学前端】Node.js实现UDP通信
    1、node简介Node.js是一个开源的、跨平台的JavaScript运行时环境。Node.js是一个开源和跨平台的JavaScript运行时环境。它是几乎任何类型项目的流行工具!Node.js在浏览器之外运行V8JavaScript引擎(GoogleChrome的内核)。这使得Node.js非常高效。Node.js应用在......
  • 什么是前端开发中的 SVG Sprites 技术
    SVGSprites在前端WebUI渲染中的应用在前端Web应用开发中,图标的使用是非常常见的需求,而SVG(可缩放矢量图形)是一种灵活而强大的图形格式,常被用于在Web界面中呈现图标。SVG提供了可伸缩性、可定制性和清晰度,但当页面上包含大量图标时,每个图标都作为单独的HTTP请求加载可能导致性......
  • 记录--原来前端部署这么简单
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言有个朋友说前端技能大家大部分都会,就是部署项目这一块经验都比较稀缺,一直很想学一下。所以在这里写一篇简单的从零开始部署前端项目的全过程,感兴趣的掘友们或者想自己搭建项目部署的可以看一下这篇。环境搭......
  • 2023版SpringBoot2 仿B站高性能前端+后端项目开发全流程
    2023版SpringBoot2仿B站高性能前端+后端项目51xuebc+尾缀SpringBoot2仿B站高性能前端+后端项目:打造高效、稳定、可扩展的应用在当今的互联网时期,网站的性能、稳定性和可扩展性成为了权衡一个项目胜利与否的关键要素。本文将引见如何运用SpringBoot2构建一个仿B站的高性能前......
  • 前端学习-JavaScript学习-js基础-API01
    学习视频:黑马程序员视频链接DOM简介DOM简介DOM树:将HTML文档标签以树状形式表现出来DOM对象:每个标签都是DOM对象DOM核心思想:将网页内容当作对象处理DOM中最大的对象:document,其次是<html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metan......
  • web前端tips:js继承——寄生组合式继承
    上篇文章给大家分享了js继承中的寄生式继承web前端tips:js继承——寄生式继承今天给大家分享一下js继承中的寄生组合式继承寄生组合式继承寄生组合式继承是一种结合了寄生式继承和组合式继承的方式,它的目标是减少组合式继承中多余的调用父类构造函数的开销。在组合式继承......
  • 前端优化之路:构建、打包速度提升
    【前言】《闻香识女人》中有句经典台词,“有些人一分钟过尽一生”,多少人在等待中浪费了生命的美好。同样,如果一个项目构建、热更新、打包速度过慢,中途需大把时间去等待,那么不免让人抓狂。 【效果展示】优化前,构建速度 整整126秒,两分多钟过去后,项目才启动成功  优化后,......
  • py01-前端了解
    前端了解:一、CSS框架(1)Bootstrap(http://getbootstrap.com/)二、JavaScript框架:(1)jQuery(https://jquery.com/)(2)Vue(3)React三、AJAX:(1)AJAX=异步JavaScript和XML(2)AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着......