JavaScript Asynchronous (one) automatic prompt display column

Source: Internet
Author: User

We all know "auto tip" and look at one of the following sample code:

<! DOCTYPE html>


Check out the Keypress.js file

(function (exprots) {var cnt = 0,callback = function () {cnt++;if (console) Console.log (' You triggered me ' + cnt + ');},keypress = Funct Ion (option) {var elem = document.getElementById (option.id); Addevent (Elem, ' KeyUp ', function (e) {callBack ();});}, Addevent = (function () {return function (Elm, Evtype, FN, usecapture) {if (Elm.addeventlistener) {Elm.addeventlistener ( Evtype, FN, usecapture);//dom2.0return true;} else if (elm.attachevent) {var r = elm.attachevent (' on ' + Evtype, fn);//ie5+return R;} else {elm[' on ' + evtype] = fn;//dom 0}};}) (); exprots.keypress = keyPress;}) (window);


The effect is as follows:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/5B/47/wKiom1UD8ziDFvPIAAFsFCa46LA251.jpg "style=" float: Left; "title=" 1.jpg "alt=" Wkiom1ud8zidfvpiaafsfca46la251.jpg "/>

But the problem is that the basic requirement of this code is that the "auto prompt" is triggered whenever we enter a character, but this is not the expected result we want.


The results we expect are:

1. When we have entered a keyword or key sentence, we will trigger the "Auto Prompt".

2. When we delete the contents of the input box continuously, we do not trigger "auto prompt" until we stop deleting the action.



So what kind of approach should we use to achieve the results we expect? Let's start by analyzing the code logic:

1. Every time when we press a button, then the code triggers "Auto Prompt", this code is no logical problem.

2. The above code logic is correct, but its disadvantage is that input and event monitoring are synchronous.

Here's an example:

We want to enter the full "I love you" and then trigger "Auto Prompt".


We can try to use the SetTimeout function delay, that is, when the previous input is complete, it can be delayed execution.

This will achieve the delay effect, but the insufficient is: how many times, or how many times to execute, but every once in a while to execute.

However, this is not the effect we expect, we want to be the last to enter "You" when the "Automatic prompt." What to do? You can use the following cleartimeout function.


Check out the KeyPress.improve.js file

 (function (exprots) {var cnt = 0,currentthread =  Null,delay = 300,callback = function () {cnt++;if (console) Console.log (' You triggered me '  +  cnt +  ');},keypress = function (option) {Var elem = document.getelementbyid (option.id); Addevent (elem,  ' KeyUp ',  function (e) {cleartimeout (CurrentThread);//Clear Last action CurrentThread  = settimeout (function () {callBack ();}, delay);//Enter the queued state});},addevent =  (function () { Return function (elm, evtype, fn, usecapture) {if  (Elm.addeventlistener)  { Elm.addeventlistener (evtype, fn, usecapture);//dom2.0return true;} else if  (elm.attachevent)  {var r = elm.attachevent (' on '  + evType, &NBSP;FN);//ie5+return r;} else {elm[' on '  + evtype] = fn;//dom 0}}}) (); exprots.keypress = keypress;}) (window); 


650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/5B/47/wKiom1UD9NvigdP3AAEXIUmL8VI708.jpg "title=" 2.jpg " alt= "Wkiom1ud9nvigdp3aaexiuml8vi708.jpg"/>


The desired effect is achieved, but can we make it more perfect?

Next we think about the following questions,

    1. Can we remove some non-conforming input key values?

    2. Can we add some combination key values?

On the above question, we are discussing the study next time.

This article from "Shoppa" blog, declined reprint!

JavaScript Asynchronous (one) automatic prompt display column

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.