Unlock instant, AI-driven research and patent intelligence for your innovation.

Anti-shake and throttling packaging method and system

A technology of encapsulating methods and functions, which is applied in the direction of program control devices, program control design, and other database retrievals. It can solve problems such as poor user experience, increase the burden on browsers, and affect performance, and achieve the effect of simple use

Active Publication Date: 2020-07-28
上海熙菱信息技术有限公司
View PDF9 Cites 0 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0002] In the front end, when the window is resized (resize), scrolled (scroll), input (input), and the map zoom (zoom) and setting range (extent) events are triggered, these operations usually have a high frequency and affect Performance, if the frequency of event handler calls is unlimited, it will increase the burden on the browser, resulting in a very bad user experience

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Anti-shake and throttling packaging method and system
  • Anti-shake and throttling packaging method and system
  • Anti-shake and throttling packaging method and system

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0040] Use the packaged component in Vue, the specific implementation code is:

[0041]

[0042]

[0043] Among them, the specific implementation code of the function anti-shake debounce is:

[0044]

[0045]

[0046] The specific implementation code of Vue functional component package anti-shake is:

[0047]

[0048]

[0049] Function throttling (throttle): When the event is continuously triggered, it is guaranteed that the event processing function is called only once within a certain period of time. The popular explanation of throttling is like turning on water from a faucet. Once the valve is opened, the water will rush down. With the fine traditional virtues of thrift and thrift, we should turn down the faucet. Drop by drop within a time interval.

[0050] The specific implementation code of function throttle is:

[0051]

[0052]

[0053] Use start time startTime, current time curTime and delay time delay inside the throttling function to calcu...

Embodiment 2

[0058] Use it as a function:

[0059] (1) Write the function anti-shake and throttling to utils.js, the specific implementation code is:

[0060] Function anti-shake

[0061]

[0062]

[0063] function throttling

[0064]

[0065]

[0066] (2) Used in components, taking the input event as an example, the specific implementation code is:

[0067]

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses an anti-shake and throttling encapsulation method and system, and relates to the technical field of JavaScript performance optimization, and the method comprises the followingsteps: 1, monitoring the occurrence of a specific event through employing JavaScript; and step 2, when occurrence of a specific event is monitored, executing an event processing function through function anti-shake and function throttling, the function anti-shake being capable of being executed immediately for the first time. The method and system are simple to use, and can meet most of anti-shakerequirements, such as a rolling event, a size adjustment event and a button clicking event; and further packaging is carried out based on the function, for example, Vue, React components and the likeare packaged.

Description

technical field [0001] The invention relates to the technical field of JavaScript performance optimization, in particular to an anti-shake and throttling encapsulation method and system. Background technique [0002] In the front end, when the window is resized (resize), scrolled (scroll), input (input), and the map zoom (zoom) and setting range (extent) events are triggered, these operations usually have a high frequency and affect Performance, if the frequency of event handler calls is unlimited, it will increase the burden on the browser, resulting in a very bad user experience. In fact, we don’t need frequent requests in our business, we only need to obtain the required information every once in a while, so in this scenario we can use setTimeout to set the time interval, so as to limit the operation of frequent requests. This is JavaScript anti-shake (debounce) and throttle (throttle). [0003] Function anti-shake (debounce): When the event is triggered continuously, t...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Applications(China)
IPC IPC(8): G06F16/957G06F9/455
CPCG06F16/9574G06F9/45529
Inventor 张珍妮李小波
Owner 上海熙菱信息技术有限公司