Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Solution to jquery selector that is not supported in setTimeout_javascript skills

Solution to jquery selector that is not supported in setTimeout_javascript skills

WBOY
Release： 2016-05-16 16:01:47
Original
1375 people have browsed it

When I was writing a js delay event today, I found that using jquery's $(this) in the setTimeout method did not work. After various tests, I finally concluded that jquery's selector is not supported in setTimeout. So I asked the jquery development experts on QQ for advice, and they solved the problem immediately. I will record it here.
The following is the js code used by the author when doing delayed processing: 

$('.dl_select dt').hover( 
  function(){ 
    clearTimeout(t3); 
    $(this).siblings('dd').css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    t2=setTimeout(function(){$(this).siblings('dd').css({'display':'none'});},300); 
  } 
); 
$('.dl_select dd').hover( 
  function(){ 
    clearTimeout(t2); 
    $(this).css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    t3=setTimeout(function(){$(this).css({'display':'none'});},200); 
  } 
);
Copy after login

Pay attention to the code in setTimeout in the above code. If these codes are not in this method, there is no problem in itself, but in this case, an error will be reported. As for the reason, the author has not figured it out yet. After being enlightened by netizens, I changed it to the following and it will be fine. The method is very clever. The following is the correct code: 

$('.dl_select dt').hover( 
  function(){ 
    clearTimeout(t3); 
    $(this).siblings('dd').css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    var $this=$(this).siblings('dd'); 
    t2=setTimeout(function(){$this.css({'display':'none'});},300); 
  } 
); 
$('.dl_select dd').hover( 
  function(){ 
    clearTimeout(t2); 
    $(this).css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    var $this=$(this); 
    t3=setTimeout(function(){$this.css({'display':'none'});},200); 
  } 
);
Copy after login

The above is the entire content of this article, I hope you all like it.

Related labels：
settimeout
source：php.cn
Previous article：Comparison of methods and differences between Js and Jq for obtaining page element values_jquery Next article：Examples of mobile phone floating layer controls with js compatible with PC browsers and with various pop-up prompts_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
A simple Hello world program creates multiple node instances I'm very new to Javascript and NodeJS. I am running a simple helloworld program as follows...
From 2024-04-04 11:03:22
0
1
310
Ag-Grid: Is it possible to style a row on a timer, rather than based on the data in the row? I need to change the background color of rows after some time. There is a column in the gr...
From 2024-04-03 20:14:05
0
1
360
Focus doesn't move after using useRef hook in react Here is my code where I get a reference to the current element that I want to focus on, bu...
From 2024-04-02 21:46:33
0
1
383
Vanilla JS setTimeout(): Identifying wrong behavior I have an animation on my hamburger menu written in HTML, CSS and vanilla JavaScript. Expe...
From 2024-04-02 20:44:40
0
1
284
The transitional fire of the inner child This is a minimal reproducible example. The transition end of the "toggle" hover...
From 2024-04-02 14:38:29
0
1
262
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template