JavaScript / jQuery Changeイベントの遅延をどのように減らすか? -- javascript フィールド と jquery フィールド 関連 問題

How reduce delay in javascript / jquery change event?












0
vote

問題

日本語

私は5つのフィルタ(複数選択)を持っています。これはダッシュボード内の5つの視覚化の背後にあるデータをフィルタリングします。フィルタにはjQuery Changeイベントがありますが、このイベントの最初のコード行は起こるために半分の2秒かかります。なぜ遅延があるのか​​わかりません。コードの最初の行の後にコードを削除すると、遅延が消えます。コードがシーケンスで実行されていないかのようです。

その最初のコード行の目的は、更新コードが実行されるまでグラフィックを曖昧にするために、目に見えるような5つの「ミスティ」(セミ不透明)のDIVを作ることです。

選択したものを選択していますが、選択した場合でも選択しても遅れがあります。フィルタは動的に構築されています。これが変更イベントを追加するコードです:

<事前> <コード> for (i=0; i<filters0Length; i++) { $("[id='"+filters[0][i]+"']").on('change',function(e,p){ d3.selectAll("div.misty").style("visibility","visible");//make the fade divs appear - takes half a second if (!p) { for (var j=0; j<filters[0].length; j++) { filters[6][j] = []; filters[5][j].filterAll(); } } else { if (p.selected) { var tempIndex = filters[0].indexOf(e.target.id);//whether it's company, portfolio, industry or country filters[6][tempIndex].push(p.selected);//store this filter filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; }); } if (p.deselected) { var tempIndex = filters[0].indexOf(e.target.id);//whether it's company, portfolio, industry or country var tempIndex2 = filters[6][tempIndex].indexOf(String(p.deselected)); filters[6][tempIndex].splice(tempIndex2,1); filters[5][tempIndex].filterAll(); if (filters[6][tempIndex].length>0) { filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; }); } window.portfolio_p = window.portfolio_p2; } } update(); }) }

更新コマンドを削除すると、コードははるかに早く実行されます。

<事前> <コード> for (i=0; i<filters0Length; i++) { $("[id='"+filters[0][i]+"']").on('change',function(e,p){ d3.selectAll("div.misty").style("visibility","visible");//make the fade divs appear - takes half a second }
英語

I have five filters (multiple selects), which filter the data behind five visualisations in a dashboard. The filters have a JQuery change event, but the first line of code in this event takes half a second to happen. I don't understand why there's a delay. If I remove the code after the first line of code, the delay goes away. It's as though the code is not running in sequence.

The purpose of that first line of code is to make visible five "misty" (semi opaque) divs to obscure the graphics until the update code has run.

I'm using chosen.js on the selects but even when I remove chosen, there is still a delay. The filters are built dynamically. Here's the code that adds the change event:

  for (i=0; i<filters0Length; i++) {   $("[id='"+filters[0][i]+"']").on('change',function(e,p){      d3.selectAll("div.misty").style("visibility","visible");//make the fade divs appear - takes half a second      if (!p) {       for (var j=0; j<filters[0].length; j++) { filters[6][j] = []; filters[5][j].filterAll(); }      } else {        if (p.selected) {         var tempIndex = filters[0].indexOf(e.target.id);//whether it's company, portfolio, industry or country         filters[6][tempIndex].push(p.selected);//store this filter         filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; });       }       if (p.deselected) {         var tempIndex = filters[0].indexOf(e.target.id);//whether it's company, portfolio, industry or country         var tempIndex2 = filters[6][tempIndex].indexOf(String(p.deselected));          filters[6][tempIndex].splice(tempIndex2,1);         filters[5][tempIndex].filterAll();         if (filters[6][tempIndex].length>0) { filters[5][tempIndex].filterFunction(function(d){ return filters[6][tempIndex].indexOf(d)!=-1; }); }         window.portfolio_p = window.portfolio_p2;       }      }        update();    })   } 

If I remove the update commands, the code runs much quicker:

  for (i=0; i<filters0Length; i++) {   $("[id='"+filters[0][i]+"']").on('change',function(e,p){      d3.selectAll("div.misty").style("visibility","visible");//make the fade divs appear - takes half a second    } 
</div
     
   
   

回答リスト

1
 
vote
vote
ベストアンサー
 

MMM、私はあなたに奇妙なバグを持っている同意しなければなりません。

私が提案できるのは、フィルタ操作を後でイベントスレッドにプッシュしています。

約束を使用することは工夫されていましたが、<コード> x2 は安価です。

<事前> <コード> x3
 

Mmm, I have to agree you have an odd bug.

All I can suggest is pushing the filter manipulation into a later event thread.

You could contrive to use a Promise but window.setTimeout() is less expensive.

for(i=0; i<filters0Length; i++) {     $("[id='"+filters[0][i]+"']").on('change', function(e, p) {         d3.selectAll('div.misty').style('visibility', 'visible');         window.setTimeout(function() {             if (!p) {                 // etc...             } else {                 // etc...             }             update();         }, 0); // in practice the delay will be something like 15 ms.     }) } 
</div
 
 

関連する質問

2  OnClick HandlerをMake Linksのクリックを無視します  ( Make onclick handler ignore clicks on links ) 
ブロック要素のカスタムオンクロックハンドラ(jQueryの.click()メソッドを介して設定)。このブロック要素にはリンクを含めることができます。 これはかなり確信があるので、クリックしたリンクである場合(リンクが私のコードを実行せずに訪問されるように)ハン...

2  jQueryのAjaxForm  ( Ajaxform in jquery ) 
Ajaxformを使用しています。今私は問題に遭遇しました。私のアイデアは、ユーザーがユーザー名を入力したときに、誤ったユーザー名がユーザーにメッセージを報告する必要があります。 私のコードはうまくいっていますが、ユーザーに表示されたレポートメッセージの後、...

1  $$ jQueryでは、これは何ですか?  ( In jquery whats this used for ) 
誰かが書くだけの場合: <事前> <コード> $("#downloadTabs>div").each(function(el) { el.setStyle("display", "none"); el.removeCla...

11  スライド後のjQueryスライダコール機能  ( Jquery slider call function after slide ) 
私はWebアプリケーション上でスコアを設定するために使用しているjQuery Silderを持っています。ユーザーが送信ボタンをクリックしたが、クライアントはAjaxスタイルを更新するようになったままにするようにOrignallyにいました。 これは見つけられ...

0  jQueryの$ .click()内のインデックス番号を取得する方法  ( How to get index number inside click of jquery ) 
<事前> <コード> $("span.ws_label").click(function() { }) セレクタ「span.ws_label」選択した5つの要素、 そのうちの1つをクリックしたとき、 実際にどれを知るか? 編集 I索引やそのIDを...

210  jQueryセレクタから$(これを)除外する方法は?  ( How can i exclude this from a jquery selector ) 
私はこのようなものを持っています: <事前> <コード> <div class="content"> <a href="#">A</a> </div> <div class="content"> <a href="#">B</a> </div>...

1  JsonResultの問題  ( Jsonresult problem ) 
これを返しているActionResultがあります。 <事前> <コード> @output4 JavaScriptでは、そのaticationResultによって返される値は "{" isDeleted ":true}"です。 私は何をしていますか? 編...

0  jQuery、属性フィルタセレクタ、および正確に_which_要素をクリックした  ( Jquery attribute filter selectors and finding out exactly which element was c ) 
私はこのjqueryがうまく機能する <事前> <コード> $("li[id^='shop_id']").click( function () { alert("I clicked on id ??"); }); 'shop_id'でIDを持つ...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有